body,html{
margin:0px;
padding:0px;
}
body *{
box-sizing:border-box;
font-family:"Inter" ,sans-serif;
}
body{
background-color:#F9FAFB;
}
.container__check {
display: flex;
align-items:center;
justify-content:flex-start;
font-size: 14px;
line-height: 150%;
color:#111928;
}
/* Hide the browser's default checkbox */
.container__check input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: relative;
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 16px;
max-width: 16px;
min-height: 16px;
max-height: 16px;
border-radius: 4px;
margin-right: 12px;
background-color:transparent;
border:1px solid #E5E7EB;
}
/* When the checkbox is checked, add a blue background */
.container__check input:checked ~ .checkmark {
background-color: #1C45C2;
border-color:#1C45C2;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container__check input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container__check .checkmark:after {
left: 5px;
top: 2px;
width: 3px;
height: 6px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.group__dropdown{
position: relative;
&>a{
&>svg{
transition:.4s ease all;
}
&.opened{
&>svg{
transform:rotate(180deg);
}
}
}
& .dropdown{
position: absolute;
left: 0px;
width: 100%;
max-height: 200px;
top:50px;
border-radius: 8px;
box-shadow:0px 4px 6px rgba(0,0,0,.1);
overflow-y:auto;
z-index: 3;
background-color:#fff;
box-shadow:0px 4px 6px rgba(0,0,0,.1);
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
}
&::-webkit-scrollbar-thumb {
border-radius: 250px;
background-color:rgb(28,69,194);
}
& ul{
padding:0px;
list-style-type: none;
margin:0px;
&>li{
margin-bottom: 0px;
&>a{
display: flex;
align-items:center;
justify-content:flex-start;
text-decoration: none;
padding:8px 16px;
font-size: 14px;
color:#374151;
transition:.3s ease all;
&:hover{
background-color:#F9FAFB;
}
}
&:last-child{
margin-bottom: 0px;
}
}
}
}
}
.container__radio {
display: flex;
align-items:flex-start;
justify-content:flex-start;
}
/* Hide the browser's default radio button */
.container__radio input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom radio button */
.radio {
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 16px;
max-width: 16px;
min-height: 16px;
max-height: 16px;
border:1px solid #D1D5DB;
border-radius: 250px;
position: relative;
}
/* When the radio button is checked, add a blue background */
.container__radio input:checked ~ .radio {
background-color: #1C45C2;
border-color:#1C45C2;
}
.irs--flat .irs-from, .irs--flat .irs-to, .irs--flat .irs-single{
display: none;
}
.irs--flat .irs-min, .irs--flat .irs-max{
display: none;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.radio:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container__radio input:checked ~ .radio:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container__radio .radio:after {
top: 3.2px;
left: 3.2px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
.irs--flat .irs-line{
height: 8px;
border-radius: 4px;
background-color:#E5E7EB;
}
.irs--flat .irs-bar{
height: 8px;
background-color:#1C45C2;
}
.irs--flat .irs-handle>i:first-child{
min-width: 22px;
max-width: 22px;
min-height: 22px;
max-height: 22px;
margin-top: -5px;
background-color:#fff!important;
border-radius: 250px;
margin-left: -9px;
box-shadow:0px 1px 7px rgba(0,0,0,.15);
}
.container__check.bigger{
& .checkmark{
&:after{
left: 6.5px;
top: 1.5px;
width: 5px;
height: 10px;
}
min-width: 20px;
max-width: 20px;
min-height: 20px;
max-height: 20px;
background-color:#F9FAFB;
}
}
.regular__table{
border-radius: 8px;
// overflow:hidden;
border:1px solid #D1D5DB;
background-color:#fff;
&>.top{
padding:16px;
display: flex;
align-items:center;
justify-content:space-between;
& .switcher{
& ul{
padding:0px;
list-style-type: none;
margin:0px;
display: flex;
align-items:center;
border-radius: 8px;
border:1px solid #E5E7EB;
justify-content:flex-start;
&>li{
border-right:1px solid #E5E7EB;
&:nth-child(1){
& a{
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
}
&:last-child{
& a{
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
}
&:last-child{
border-radius: 0px;
}
&>a{
display: flex;
align-items:center;
justify-content:center;
text-decoration: none;
padding-left: 16px;
padding-right: 16px;
min-height: 37px;
font-size: 14px;
line-height: 130%;
color:#374151;
font-weight: 400;
transition:.3s ease all;
&:hover{
color:#111928;
background-color:#F9FAFB;
}
&.current{
color:#111928;
background-color:#F9FAFB;
}
}
}
}
}
& form{
width: 100%;
max-width: 310px;
display: flex;
align-items:center;
justify-content:flex-start;
&>input{
width: 100%;
height: 37px;
border-radius: 8px;
border:1px solid #E5E7EB;
background-color:#F9FAFB;
outline:none;
padding-left: 34px;
padding-right: 12px;
}
& button{
display: inline-flex;
align-items:center;
justify-content:center;
padding:0px;
margin:0px;
border:0px;
outline:none;
cursor:pointer;
position: absolute;
background-color:transparent;
left: 10px;
}
position: relative;
}
}
}
.regular__table{
& .container__check{
cursor:pointer;
}
& .check{
width: 80px;
& .checkmark{
background-color:#F9FAFB;
}
}
& .btns{
&>.type__tag{
margin-right: 16px;
}
}
& .type__tag{
display: inline-flex;
align-items:center;
justify-content:center;
min-height: 25px;
border-radius: 6px;
padding-left: 10px;
padding-right: 10px;
border-radius: 6px;
background-color:#F9FAFB;
font-size: 14px;
}
& td p{
margin:0px;
}
& .campaign__table--element{
&>ul{
padding:0px;
margin:0px;
list-style-type: none;
display: flex;
align-items:center;
justify-content:flex-start;
&>li{
font-size: 12px;
color:#6B7280;
line-height: 150%;
&.spacer{
display: flex;
align-items:center;
justify-content:center;
margin:0px 8px;
}
}
}
&>.top{
display: flex;
align-items:center;
justify-content:flex-start;
margin-bottom: 8px;
&>p{
margin:0px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
&>span{
display: inline-flex;
min-width: 16px;
max-width: 16px;
min-height: 16px;
max-width: 16px;
margin-right: 8px;
& svg{
width: 100%;
}
}
}
}
}
body.opened{
& .main__wrapper{
padding-left: 264px;
}
& header{
width: calc(100% - 240px);
left: 240px;
}
}
header{
z-index: 3;
transition:.4s ease all;
}
.main__wrapper{
transition:.4s ease all;
}
.side__menu{
position: fixed;
top:0px;
left: 0px;
width: 56px;
height: 100%;
border-right:1px solid #E5E7EB;
padding-left: 8px;
padding-right: 8px;
transition:.4s ease all;
background-color:#fff;
z-index: 8;
&.opened{
width: 240px;
padding-left: 20px;
padding-right: 20px;
&>.top>.logo__wrapper{
& .short{
opacity:0;
pointer-events:none;
}
&>.long{
opacity: 1;
pointer-events:initial;
}
}
&>.top{
&>ul{
width: 100%;
&>li{
width: 100%;
&>a{
width: 100%;
font-size: 14px;
justify-content:flex-start;
&>svg{
margin-right: 12px;
}
}
}
}
}
}
& .bottom{
position: absolute;
bottom:16px;
right: 16px;
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
text-decoration: none;
min-width: 24px;
max-width: 24px;
min-height: 24px;
max-height: 24px;
transition:.4s ease all;
&.opened{
transform:rotate(180deg);
}
}
}
&>.top{
padding-top: 15px;
width: 100%;
text-align: center;
margin-bottom: 20px;
& .logo__wrapper{
position: relative;
& .short{
transition:.4s ease all;
}
& .long{
display: flex;
justify-content:flex-start;
position: absolute;
left: 0px;
top:3px;
opacity:0;
pointer-events:none;
transition:.2s ease all;
& img{
max-width: 95px;
}
}
}
&>ul{
padding:0px;
list-style-type: none;
margin:0px;
margin-top: 20px;
&>li{
margin-bottom: 16px;
&>a{
display: inline-flex;
align-items:center;
justify-content:flex-start;
min-width: 40px;
min-height: 36px;
border-radius: 8px;
transition:.4s ease all;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
font-size: 0px;
line-height: 130%;
width: 100%;
font-weight: 500;
color:#1F2A37;
&.current{
color:#4162E5;
}
& svg{
margin-right: 0px;
transition:.4s ease all;
}
&.current{
background-color:#E9ECFB;
& svg path{
fill:#1C45C2;
}
}
&:hover{
color:#4162E5;
background-color:#E9ECFB;
& svg path{
fill:#1C45C2;
}
}
& svg path{
transition:.4s ease all;
fill:#374151;
}
}
&:last-child{
margin-bottom: 0px;
}
}
}
}
&>a{
display: flex;
align-items:center;
justify-content:center;
padding-top: 16px;
}
}
header{
position: fixed;
top:0px;
left: 56px;
border-bottom:1px solid #E5E7EB;
background-color:#fff;
padding:8px 24px;
width: calc(100% - 56px);
& .outer__header{
display: flex;
justify-content:space-between;
& .header__left{
width: 100%;
max-width: 620px;
& form{
width: 100%;
position: relative;
display: flex;
align-items:center;
& button{
left: 15px;
min-width: 18px;
max-width: 18px;
min-height: 18px;
max-height: 18px;
cursor:pointer;
outline:none;
border:0px;
display: flex;
align-items:center;
justify-content:center;
padding:0px;
background-color:transparent;
transition:.4s ease all;
&:hover{
opacity:.7;
}
position: absolute;
}
&>input{
width: 100%;
height: 36px;
border-radius: 8px;
border:1px solid #E5E7EB;
outline:none;
padding-left: 42px;
padding-right: 16px;
background-color:#F9FAFB;
font-size: 14px;
color:#000;
}
display: flex;
align-items:center;
justify-content:flex-start;
}
}
& .header__right{
display: flex;
align-items:center;
justify-content:flex-end;
& .settings{
position: relative;
&>a svg path{
transition:.4s ease all;
}
&>a.opened{
& svg path{
fill:#1C45C2;
}
}
& .settings__dropdown{
position: absolute;
right: -64px;
top:40px;
width: auto;
background-color:#FFFFFF;
padding:4px 0px;
box-shadow:0px 4px 6px rgba(0,0,0,.1);
border-radius: 8px;
& ul{
padding:0px;
list-style-type: none;
margin:0px;
&>li{
width: 100%;
&>a{
display: flex;
align-items:center;
justify-content:flex-start;
padding:8px 16px;
text-decoration: none;
font-size: 14px;
line-height: 130%;
font-weight: 400;
color:#374151;
white-space: nowrap;
transition:.4s ease all;
&:hover{
background-color:#F9FAFB;
}
}
}
}
}
}
& .spacer{
margin-left: 24px;
margin-right: 20px;
min-height: 20px;
min-width: 1px;
background-color:#E5E7EB;
}
& .project__wrapper{
position: relative;
&>a{
display: inline-flex;
align-items:center;
padding:4px;
justify-content:flex-start;
text-decoration: none;
&>p{
margin:0px;
font-size: 12px;
line-height: 125%;
font-weight: 500;
color:#111928;
}
& svg{
margin-left: 8px;
transition:.3s ease all;
}
&>span{
margin-right: 8px;
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 26px;
max-width: 26px;
min-height: 26px;
max-height: 26px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
}
}
}
& .controls{
display: flex;
align-items:center;
justify-content:flex-end;
& .theme{
display: inline-flex;
&>a{
display: inline-flex;
font-size: 17px;
color:#000;
text-decoration: none;
}
}
&>div{
position: relative;
display: inline-flex;
align-items:center;
justify-content:center;
margin-right: 24px;
&>a{
display: inline-flex;
}
&:last-child{
margin-right: 0px;
}
}
}
& .profile{
display: inline-flex;
margin-left: 24px;
position: relative;
& .dropdown__profile{
position: absolute;
right: 0px;
top:39px;
border-radius: 8px;
background-color:#FFFFFF;
box-shadow:0px 4px 6px rgba(0,0,0,.1);
& ul{
padding:0px;
list-style-type: none;
margin:0px;
display: flex;
align-items:flex-start;
padding:4px 0px;
flex-direction:column;
width: 100%;
&>li{
width: 100%;
&>a{
white-space: nowrap;
display: flex;
align-items:center;
justify-content:flex-start;
text-decoration: none;
font-size: 14px;
line-height: 130%;
font-weight: 400;
color:#374151;
padding:8px 16px;
width: 100%;
transition:.4s ease all;
&:hover{
background-color:#F9FAFB;
}
& span{
display: inline-flex;
align-items:center;
justify-content:center;
margin-right: 8px;
}
&:hover{
background-color:#F9FAFB;
}
}
}
}
}
&>a{
min-width: 34px;
max-width: 34px;
min-height: 34px;
max-height: 34px;
border-radius: 250px;
display: inline-flex;
align-items:center;
justify-content:center;
text-decoration: none;
&>span{
font-size: 12px;
line-height: 130%;
font-weight: 600;
}
}
}
}
}
}
.main__wrapper{
padding-top: 92px;
padding-left: 80px;
padding-bottom: 30px;
width: 100%;
padding-right: 24px;
}
.main__wrapper.settings{
padding-top: 52.8px;
padding-left: 56px;
padding-right: 0px;
padding-bottom: 0px;
}
body.opened .main__wrapper.settings{
padding-left: 240px;
}
body.opened .main__wrapper.inbox{
padding-left: 240px;
}
.expand__settings , .expand__configure{
display: none;
}
body.opened .main__wrapper.configure{
padding-left: 240px;
}
.main__wrapper.configure{
padding-top: 52.8px;
padding-left: 56px;
padding-right: 0px;
padding-bottom: 0px;
}
body.opened .main__wrapper.campaign{
padding-left: 240px;
}
.main__wrapper.campaign{
padding-top: 53px;
padding-left: 56px;
padding-bottom: 0px;
padding-right: 24px;
}
.outline-btn{
display: inline-flex;
align-items:center;
justify-content:space-between;
min-height: 37px;
border-radius: 8px;
text-decoration: none;
font-size: 12px;
line-height: 150%;
color:#111928;
font-weight: 500;
padding-left: 12px;
padding-right: 12px;
border:1px solid #D1D5DB;
transition:.3s ease all;
&:hover{
background-color:#F9F9F9;
}
&:active{
box-shadow:0px 0px 0px 3px #C3DDFD;
}
&.opened{
box-shadow:0px 0px 0px 3px #C3DDFD;
}
& span{
display: inline-flex;
margin-right: 8px;
}
}
.regular-btn{
display: inline-flex;
align-items:center;
justify-content:center;
text-decoration: none;
min-height: 37px;
border-radius: 8px;
cursor:pointer;
border:0px;
padding-left: 16px;
padding-right: 16px;
transition:.4s ease all;
&:hover{
background-color:#1E429F;
}
&:active{
box-shadow:0px 0px 0px 3px #C3DDFD;
}
font-size: 14px;
line-height: 150%;
color:#FFFFFF;
font-weight: 500;
background-color:#1C45C2;
& span{
display: inline-flex;
margin-right: 8px;
}
}
.modal__wrapper{
padding:25px 15px;
&.new__note{
& .inner__modal{
&>.modal__box{
& .controls{
margin-top: 24px;
display: flex;
justify-content:flex-end;
align-items:center;
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
min-height: 37px;
padding-left: 11px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#1C45C2;
padding-right: 11px;
text-decoration: none;
margin-right: 8px;
transition:.3s ease all;
&:hover{
opacity:.7;
}
}
&>button{
display: inline-flex;
cursor:pointer;
}
}
& .fields{
&>.box{
margin-bottom: 16px;
& .dropdown{
max-height: 160px;
}
&>p{
margin-top: 0px;
margin-bottom: 8px;
font-size: 14px;
line-height: 150%;
font-weight: 400;
color:#6B7280;
}
}
}
& .title{
display: flex;
align-items:flex-start;
justify-content:space-between;
margin-bottom: 15px;
& a{
display: inline-flex;
align-items:center;
justify-content:center;
position: relative;
top:2px;
& svg path{
transition:.4s ease all;
}
}
&>h6{
margin:0px;
margin-right: 15px;
font-size: 18px;
line-height: 140%;
font-weight: 600;
color:#0E1217;
}
}
width: 100%;
max-width: 540px;
padding:24px;
background-color:#FFFFFF;
border-radius: 8px;
}
}
}
position: fixed;
top:0px;
left: 0px;
width: 100%;
height: 100%;
background-color:rgba(17,25,40,.5);
z-index: 10;
& .inner__modal{
width: 100%;
display: flex;
align-items:center;
justify-content:center;
height: 100%;
& .modal__box{
max-height: 100%;
overflow-y:auto;
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-track {
}
&::-webkit-scrollbar-thumb {
border-radius: 250px;
background-color:rgb(28,69,194);
}
}
}
}
.modal__wrapper.new__source--attribute , .modal__wrapper.new__event--attribute , .modal__wrapper.new__event , .modal__wrapper.member__id{
& .inner__modal .modal__box{
overflow-y:visible;
}
& .double{
display: grid;
grid-template-columns:repeat(2 ,1fr);
grid-column-gap:16px;
}
}
.group__dropdown >span{
transition:.3s ease all;
}
.group__dropdown >a.opened + span{
color:#1C45C2;
}
.group__dropdown{
position: relative;
&>span{
display: inline-flex;
position: absolute;
left: 7px;
padding:0px 4px;
display: inline-flex;
align-items:center;
justify-content:center;
font-size: 12px;
line-height: 12px;
background-color:#fff;
top:-5px;
color:#4B5563;
font-weight: 500;
}
}
.modal__wrapper.new__source , .modal__wrapper.new__source--attribute , .modal__wrapper.new__event--attribute , .modal__wrapper.new__event , .modal__wrapper.member__id{
& .modal__box{
width: 100%;
max-width: 605px;
border-radius: 8px;
background-color:#fff;
padding:24px;
& .controls{
width: calc(100% + 48px);
margin-left: -24px;
margin-bottom: -24px;
border-top:1px solid #E5E7EB;
margin-top: 24px;
display: flex;
justify-content:flex-end;
align-items:center;
&>a{
display: inline-flex;
padding:12px 20px;
text-decoration: none;
font-size: 16px;
line-height: 150%;
font-weight: 500;
color:#0E1217;
min-height: 48px;
align-items:center;
justify-content:center;
color:#1C45C2;
transition:.4s ease all;
&:hover{
opacity:.7;
}
}
&>button{
display: flex;
align-items:center;
justify-content:center;
min-height: 48px;
padding-left: 20px;
padding-right: 20px;
font-size: 16px;
}
padding:16px 24px;
}
&>.top{
display: flex;
align-items:center;
justify-content:space-between;
margin-bottom: 16px;
&>h6{
margin:0px;
font-size: 18px;
line-height: 140%;
font-weight: 600;
color:#0E1217;
}
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
}
}
}
}
.breadcrumbs{
width: 100%;
padding:16px 24px;
background-color:#fff;
border-bottom:1px solid #E5E7EB;
& ul{
padding:0px;
list-style-type: none;
margin:0px;
display: flex;
align-items:center;
justify-content:flex-start;
flex-wrap:wrap;
&>li{
display: inline-flex;
align-items:center;
justify-content:center;
font-size: 14px;
line-height: 130%;
font-weight: 400;
color:#1F2A37;
&>a{
display: flex;
align-items:center;
justify-content:flex-start;
font-size: 14px;
line-height: 130%;
font-weight: 400;
color:#1F2A37;
text-decoration: none;
transition:.3s ease all;
&:hover{
opacity:.7;
}
&>span{
display: inline-flex;
margin-right: 8px;
align-items:center;
justify-content:center;
}
}
&.spacer{
margin:0px 8px;
}
}
}
}
.group__dropdown>span{
font-weight: 400;
}
.modal__wrapper.member__id{
& .modal__box{
& form{
&>.group__input{
position: relative;
& .magic__line{
display: inline-flex;
position: absolute;
top:11px;
right: 11px;
}
&>textarea{
padding-right: 25px;
width: 100%;
height: 42px;
}
}
}
&>.top{
display: flex;
align-items:flex-start;
justify-content:space-between;
& .right{
display: inline-flex;
& a{
display: inline-flex;
}
}
&>.left{
display: flex;
flex-direction:column;
align-items:flex-start;
&>h6{
margin-top: 0px;
margin-bottom: 4px;
font-size: 18px;
line-height: 140%;
font-weight: 600;
color:#0E1217;
}
&>p{
margin:0px;
font-size: 16px;
line-height: 150%;
color:#4B5563;
font-weight: 400;
}
}
}
}
}
.modal__side .sub__field{
margin-top: 24px;
padding-top: 24px;
border-top:1px solid #E5E7EB;
& .group__input:last-child{
margin-bottom: 0px!important;
}
&>h6{
margin-top: 0px;
margin-bottom: 16px;
font-size: 16px;
line-height: 125%;
font-weight: 600;
color:#111928;
}
}
.modal__wrapper.new__tag{
& .modal__box{
width: 100%;
border:1px solid #E5E7EB;
border-radius: 8px;
background-color:#fff;
max-width: 395px;
& .content{
padding:24px;
}
& .controls{
padding:16px 24px;
display: flex;
justify-content:flex-end;
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
min-height: 48px;
padding-left: 20px;
padding-right: 20px;
text-decoration: none;
color:#1C45C2;
font-size: 16px;
margin-right: 8px;
line-height: 24px;
transition:.3s ease all;
&:hover{
opacity:.7;
}
}
&>.regular-btn{
min-height: 48px;
border-radius: 8px;
padding-left: 20px;
padding-right: 20px;
font-size: 16px;
}
}
& .title{
display: flex;
align-items:center;
justify-content:space-between;
padding:24px;
border-bottom:1px solid #E5E7EB;
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
}
&>h6{
margin:0px;
font-size: 18px;
line-height: 140%;
color:#0E1217;
font-weight: 600;
margin-right: 15px;
}
}
}
}
.pagination{
padding:16px;
display: flex;
justify-content:space-between;
align-items:center;
& .pagination__switcher{
& ul{
padding:0px;
list-style-type: none;
margin:0px;
display: flex;
justify-content:flex-end;
border:1px solid #D1D5DB;
overflow:hidden;
border-radius: 6px;
&>li{
min-width: 31px;
display: flex;
align-items:center;
justify-content:center;
border-right:1px solid #D1D5DB;
&:last-child{
border-right:0px;
}
}
&>li>a{
min-width: 31px;
min-height: 33px;
display: flex;
align-items:center;
justify-content:center;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#111928;
transition:.3s ease background-color, .3s ease color;
&:hover{
color:#1C45C2;
background-color:#E9ECFB;
& svg path{
fill:#1C45C2;
}
}
&.current{
color:#1C45C2;
font-weight: 500;
background-color:#E9ECFB;
}
}
}
}
&>p{
margin:0px;
font-size: 14px;
line-height: 150%;
font-weight: 400;
color:#6B7280;
& span{
font-weight: 600;
color:#111928;
}
}
}
.medium{
font-weight: 500!important;
}
.dark{
color:#111928;
}
.gray{
color:#6B7280;
}
textarea{
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-track {
}
&::-webkit-scrollbar-thumb {
border-radius: 250px;
background-color:rgb(28,69,194);
}
}
.table__wrapper{
width: 100%;
overflow-x:auto;
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-track {
}
&::-webkit-scrollbar-thumb {
border-radius: 250px;
background-color:rgb(28,69,194);
}
& table{
width: 100%;
border-bottom:1px solid #E5E7EB;
border-collapse: collapse;
& .btns{
display: flex;
justify-content:flex-end;
align-items:center;
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 30px;
max-width: 30px;
min-height: 30px;
max-height: 30px;
border-radius: 4px;
transition:.3s ease all;
&:hover{
background-color:#F9FAFB;
}
&.remove{
&.colored{
& svg path{
fill:#F05252;
}
}
& svg path{
transition:.3s ease all;
}
&:hover{
& svg path{
fill:rgb(240, 82, 82);
}
background-color:rgba(240, 82, 82,.15);
}
}
margin-right: 16px;
&:last-child{
margin-right: 0px;
}
}
}
& .right{
text-align: right;
}
& .left{
text-align: left;
}
& .center{
text-align: center;
& .container__check {
display: block;
margin-left: auto;
margin-right: auto;
width: 20px;
}
}
& tr:last-child td{
border-bottom:0px;
}
& tr td{
padding:24px 16px;
border-bottom:1px solid #E5E7EB;
&>p{
margin:0px;
font-size: 14px;
}
}
& tr th{
border-top:1px solid #E5E7EB;
border-bottom:1px solid #E5E7EB;
padding:16px;
background-color:#F9FAFB;
text-align: left;
font-size: 12px;
line-height: 150%;
text-transform: uppercase;
font-weight: 600;
&:last-child{
border-right:0px;
}
color:#6B7280;
& p{
margin:0px;
}
}
}
}
.table__wrapper table tr th{
white-space: nowrap;
}
.modal__side{
position: fixed;
top:0px;
left: 0px;
z-index: 9;
width: 100%;
height: 100%;
background-color:rgba(17, 25, 40,.5);
& .inner__modal{
width: 100%;
height: 100%;
display: flex;
align-items:center;
justify-content:flex-end;
&>.modal__box{
height: 100%;
max-height: 100%;
overflow-y:auto;
transition:.5s ease all;
margin-right: 0px;
width: 100%;
padding-top: 48px;
padding-left: 32px;
padding-right: 32px;
max-width: 475px;
background-color:#FFFFFF;
position: relative;
padding-bottom: 32px;
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-track {
}
&::-webkit-scrollbar-thumb {
border-radius: 250px;
background-color:rgb(28,69,194);
}
& .add__task--form{
min-height: 100%;
width: 100%;
display: flex;
&>form{
width: 100%;
display: flex;
flex-direction:column;
justify-content:space-between;
& .bottom{
&>button{
display: flex;
align-items:center;
justify-content:center;
width: 100%;
height: 41px;
}
}
& .top{
&>.group__dropdown{
margin-bottom: 16px;
}
&>.group__input{
margin-bottom: 16px;
}
margin-bottom: 35px;
&>h2{
margin-top: 0px;
margin-bottom: 30px;
font-size: 24px;
line-height: 125%;
font-weight: 600;
color:#111928;
}
}
}
}
& .close__btn{
display: inline-flex;
position: absolute;
top:24px;
right: 32px;
& a{
display: inline-flex;
align-items:center;
justify-content:center;
}
}
}
}
}
.group__input{
&.float__group{
position: relative;
&.focused{
&>textarea , &>input{
border-color:#1C45C2;
}
&>span{
top:-6px;
left: 7px;
font-size: 12px;
color:#1C45C2;
line-height: 12px;
}
}
&.final__state{
&>span{
top:-6px;
left: 7px;
font-size: 12px;
line-height: 12px;
}
}
&>textarea{
height: 84px;
transition:.3s ease all;
padding-top: 10px;
}
&>input{
width: 100%;
height: 42px;
border-radius: 8px;
outline:none;
border:1px solid #D1D5DB;
transition:.3s ease all;
padding-left: 12px;
padding-right: 12px;
color:#000;
}
&>textarea{
width: 100%;
height: 42px;
border-radius: 8px;
outline:none;
border:1px solid #D1D5DB;
padding-left: 12px;
padding-right: 12px;
color:#000;
resize:none;
height: 85px;
}
&>span{
cursor:pointer;
position: absolute;
top:11px;
padding-left: 5px;
pointer-events:none;
padding-right: 5px;
background-color:#fff;
transition:.3s ease all;
left: 12px;
font-size: 14px;
line-height: 150%;
font-weight: 400;
color:#6B7280;
}
}
}
.group__dropdown.regular>a.not__picked>span{
color:#6B7280;
}
.group__dropdown.regular{
&>a{
&.opened{
border-color:#1C45C2;
}
transition:.3s ease all;
min-height: 42px;
width: 100%;
border:1px solid #D1D5DB;
border-radius: 8px;
text-decoration: none;
width: 100%;
display: flex;
align-items:center;
justify-content:space-between;
padding-left: 12px;
padding-right: 12px;
&>span{
color:#111928;
font-size: 14px;
font-weight: 400;
}
width: 100%;
}
}
.group__attachment{
margin-top: 24px;
&>input{
position: absolute;
left: -25000px;
}
& .droppable__area{
display: flex;
align-items:center;
justify-content:center;
flex-direction:column;
padding:26px 15px;
background-color:#F9FAFB;
border:2px dashed #E5E7EB;
border-radius: 8px;
cursor:pointer;
&>span{
display: flex;
align-items:center;
justify-content:center;
margin-bottom: 7px;
}
&>p{
margin:0px;
font-size: 14px;
line-height: 24px;
color:#6B7280;
& span{
font-weight: 600;
}
}
}
&>p{
margin-top: 0px;
margin-bottom: 10px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
}
.no__bottom--padding{
padding-bottom: 0px!important;
}
.modal__side{
& .task__main--wrapper{
height: 100%;
display: flex;
flex-direction:column;
justify-content:space-between;
& .btn{
display: flex;
margin-top: 25px;
align-items:center;
padding-bottom: 20px;
justify-content:center;
&>a{
width: 100%;
display: flex;
align-items:center;
justify-content:center;
min-height: 41px;
color:#111928;
font-size: 14px;
}
}
}
& .task__switcher{
margin-bottom: 16px;
& ul{
padding:0px;
list-style-type: none;
margin:0px;
display: flex;
align-items:center;
justify-content:center;
width: 100%;
border:1px solid #E5E7EB;
border-radius: 8px;
overflow:hidden;
&>li{
width: 100%;
border-right:1px solid #E5E7EB;
&:last-child{
border-right:0px;
}
&>a{
&.current{
color:#111928;
font-weight: 500;
background-color:#F9F9F9;
}
transition:.3s ease all;
&:hover{
background-color:#F9F9F9;
}
text-decoration: none;
font-size: 14px;
line-height: 130%;
font-weight: 400;
color:#374151;
display: flex;
align-items:center;
justify-content:center;
min-height: 34px;
}
}
}
}
& .your__task--wrapper{
& .search__task{
margin-bottom: 24px;
display: flex;
align-items:center;
justify-content:space-between;
& .buttons{
display: flex;
align-items:center;
justify-content:flex-end;
& .filter__tasks{
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 37px;
max-width: 37px;
min-height: 37px;
max-height: 37px;
border-radius: 8px;
border:1px solid #D1D5DB;
}
& .add__new--task--popup{
width: 37px;
height: 37px;
border-radius: 8px;
background-color:#1C45C2;
display: inline-flex;
align-items:center;
justify-content:center;
margin-right: 8px;
transition:.3s ease all;
&:hover{
background-color:#1E429F;
}
}
}
& form{
width: 100%;
margin-right: 8px;
position: relative;
& button{
display: inline-flex;
align-items:center;
justify-content:center;
position: absolute;
left: 10px;
top:50%;
transform:translateY(-50%);
padding:0px;
background-color:transparent;
border:0px;
& svg path{
transition:.3s ease all;
}
}
&>input{
outline:none;
width: 100%;
height: 37px;
background-color:#F9FAFB;
border:1px solid #D1D5DB;
border-radius: 8px;
padding-left: 34px;
padding-right: 15px;
}
}
}
&>h2{
margin-top: 0px;
margin-bottom: 24px;
font-size: 24px;
line-height: 125%;
font-weight: 600;
color:#111928;
}
}
}
textarea{
resize:none;
}
.switch {
cursor:pointer;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: relative;
display: inline-block;
min-width: 40px;
min-height: 20px;
background-color:#ccc;
cursor:pointer;
transition:.4s ease all;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #1C45C2;
}
input:checked + .slider:before {
-webkit-transform: translateX(19px);
-ms-transform: translateX(19px);
transform: translateX(19px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
header .settings__dropdown{
min-width: 260px;
max-width: 1000px;
}
.minicolors {
width: 100%;
& .color__picker{
width: 100%;
padding-left: 38px;
height: 42px;
border: 1px solid #D1D5DB;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
outline: none;
border-left: 0px;
}
}
.minicolors-theme-default .minicolors-swatch{
top:12px;
left: 12px;
}
.minicolors-swatch:after{
content:none!important;
}
.minicolors-sprite{
background:none;
border:1px solid #E5E7EB;
border-radius: 3px;
overflow:hidden;
}
.upload__file{
position: relative;
display: flex;
align-items:center;
justify-content:flex-start;
&>input[type="text"]{
width: 100%;
padding-left: 16px;
height: 42px;
border:1px solid #D1D5DB;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
outline:none;
border-left: 0px;
}
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 115px;
min-height: 42px;
font-size: 14px;
line-height: 150%;
text-decoration: none;
color:#FFFFFF;
font-weight: 500;
background-color:#1F2A37;
border:1px solid #D1D5DB;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
transition:.3s ease all;
&:hover{
background-color:#1E429F;
}
}
&>input[type="file"]{
position: absolute;
left: -2500px;
}
}
.color__picker{
text-transform: uppercase;
padding-left: 38px;
font-size: 14px;
color:#111928;
font-weight: 400;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border-left: 1px solid #D1D5DB!important;
}
.group__dropdown.regular>a>span{
width: calc(100% - 45px);
overflow:hidden;
display:inline-block;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
left: 12px;
}
.group__dropdown>a>svg{
margin-left: auto;
}
.modal__add--specialrating{
& .fields{
&>.group__dropdown{
margin-bottom: 24px;
}
}
}
.table__wrapper table .btns>a.remove svg path{
fill:rgb(107, 114, 128);
}
.color__text{
display: flex;
align-items:center;
justify-content:flex-start;
}
.color__box{
display: inline-flex;
margin-right: 4px;
min-width: 18px;
max-width: 18px;
min-height: 18px;
max-height: 18px;
border-radius: 3px;
border:1px solid #ececec;
}
.modal__new--appointment{
& .fields{
& .group__input{
& .minicolors {
width: 100%;
}
&>p{
margin-top: 0px;
margin-bottom: 12px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
}
}
}
td.desc{
width: 640px;
}
.group__input.field__with--info{
display: flex;
flex-direction:column;
&>span{
top:14px;
}
&>input ,&>textarea{
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
height: 50px;
padding-right: 15px;
font-size: 14px;
padding-top: 16px;
}
& .bottom__info{
display: flex;
align-items:center;
justify-content:space-between;
padding:12px 20px;
background-color:#F9FAFB;
border:1px solid #D1D5DB;
border-top:0px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
& .emoji__picker{
display: inline-flex;
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
}
}
&>.total{
&>span{
font-size: 12px;
line-height: 150%;
color:#4B5563;
font-weight: 400;
& span{
color:#111928;
}
}
}
}
}
.embed{
padding-top: 11px;
padding-right: 20px;
padding-left: 44px;
border-radius: 8px;
background-color:#F3F3F3;
padding-bottom: 6px;
position: relative;
overflow-y:hidden;
overflow-x:auto;
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-track {
}
&::-webkit-scrollbar-thumb {
border-radius: 250px;
background-color:rgb(28,69,194);
}
& .list{
position: absolute;
top:10px;
left: 18px;
& ul{
padding:0px;
list-style-type: none;
margin:0px;
font-size: 14px;
line-height: 25.34px;
color:#0E1217;
font-family:"Source Code Pro" ,sans-serif;
& li{
font-family:"Source Code Pro" ,sans-serif;
opacity:.5;
}
}
}
& code{
font-family:"Source Code Pro" ,sans-serif;
font-size: 14px;
line-height: 25px;
& .comment{
color:#3E4145;
}
& .script{
color:#625EEE;
}
& .object{
color:#3360FF;
}
& .link{
color:#FF9E43;
}
& .key{
color:#2A23D7;
}
& *{
font-family:"Source Code Pro" ,sans-serif;
}
white-space: pre;
& .comment{
color:#3E4145;
}
}
}
.semibold{
font-weight: 600!important;
}
.table__wrapper table{
min-width: 1000px;
}
.inbox .inbox__side.opened{
left: 56px;
}
.blue{
color:#1C45C2!important;
}
.pagination__switcher ul li{
min-height: 33px;
}
.pagination .pagination__switcher ul>li>a{
justify-content:center!important;
align-items:center!important;
}
.nowrap{
white-space: nowrap;
}
.table__wrapper .switch{
display: flex;
align-items:center;
justify-content:flex-start;
}
.expand__right{
position: absolute;
left: 50%;
transform:translateX(-50%) rotate(180deg);
bottom:42px;
opacity:0;
pointer-events:none;
}
.collapse{
margin-top: 7px;
width: 100%;
display: flex;
justify-content:flex-end;
position: relative;
left: 7px;
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
&:hover svg path{
fill:#1C45C2;
}
& svg path{
transition:.3s ease all;
}
}
}
.switch__elem .content{
transition:.3s ease all;
}
.switch__elem.disabled .content{
opacity:.45;
pointer-events:none;
}
.settings__wrapper .settings__main--box.longer{
width: 100%;
}
.box__info>.title{
display: flex;
align-items:center;
justify-content:space-between;
&>.outline-btn{
display: inline-flex;
align-items:center;
justify-content:center;
min-height: 37px;
}
&>p{
margin:0px;
font-size: 16px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
}
.embed__wrapper{
padding-top:20px;
margin-top: 20px;
border-top:1px solid #E5E7EB;
}
.events__attributes{
padding-bottom: 48px;
margin-bottom: 48px;
border-bottom:1px solid #E5E7EB;
}
.type__tag {
padding:2px 10px;
margin-top: 0px;
margin-bottom: 0px;
background-color:#F9FAFB;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
}
.btns>.type__tag{
margin-right: 16px;
}
.date__time{
& ul{
padding:0px;
list-style-type: none;
margin:0px;
display: flex;
align-items:center;
justify-content:flex-start;
&>li{
&.spacer{
display: inline-flex;
margin:0px 9px;
}
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#6B7280;
}
}
}
.contact__person{
display: flex;
align-items:center;
justify-content:flex-start;
&>p{
margin:0px;
font-size: 14px;
}
&>span{
display: inline-flex;
align-items:center;
justify-content:center;
border-radius: 250px;
min-width: 29px;
max-width: 29px;
min-height: 29px;
max-height: 29px;
font-size: 11px;
line-height: 150%;
font-weight: 600;
margin-right: 10px;
& img{
position: absolute;
left: 0px;
top:0px;
width: 100%;
height: 100%;
object-fit:cover;
border-radius: 250px;
}
}
}
.modal__side{
& .modal__box{
& .regular__box{
height: 100%;
display: flex;
width: 100%;
& .bottom{
margin-top: 20px;
}
&>form{
width: 100%;
flex-direction:column;
display: flex;
justify-content:space-between;
}
}
}
}
.add__appointment--modal{
& .regular__box{
& .top{
&>.container__check{
margin-top: -16px;
margin-bottom: 24px;
& p{
margin:0px;
font-weight: 500;
}
}
&>h6{
margin-top: 0px;
margin-bottom: 24px;
font-size: 24px;
line-height: 125%;
font-weight: 600;
color:#111928;
}
&>.double{
display: grid;
grid-template-columns:repeat(2 ,1fr);
grid-column-gap:16px;
margin-bottom: 24px;
}
&>.group__dropdown{
margin-bottom: 24px;
&:last-child{
margin-bottom: 0px;
}
}
&>.group__input{
margin-bottom: 24px;
&:last-child{
margin-bottom: 0px;
}
}
}
& .bottom{
width: 100%;
&>button{
width: 100%;
min-height: 41px;
font-size: 14px;
}
}
}
}
.datepicker{
background:url('../img/datecalendar.svg');
background-repeat: no-repeat;
background-size: 20px;
background-position: calc(100% - 12px) center;
}
.daterangepicker .calendar-table th{
font-size: 12px;
font-weight: bold;
color:#111928;
}
.daterangepicker .calendar-table th.prev{
background:url('../img/rangeleft.svg');
background-repeat: no-repeat;
background-position:center;
background-size: 18px;
&>span{
display: none;
}
}
.daterangepicker .drp-buttons>span{
display: none;
}
.daterangepicker .drp-buttons{
display: grid!important;
grid-template-columns:repeat(2 , 1fr);
grid-column-gap:12px;
padding-top: 50px;
& .applyBtn {
margin:0px;
width: 100%;
min-height: 34px;
background-color:#1C45C2;
border-radius: 8px;
font-size: 12px;
cursor:pointer;
border:0px;
outline:none;
line-height: 16px;
color:#FFFFFF;
font-weight: 500;
transition:.3s ease all;
&:hover{
background-color:#1E429F;
}
}
& .cancelBtn {
margin:0px;
width: 100%;
cursor:pointer;
height: 34px;
background-color:transparent;
font-size: 12px;
line-height: 150%;
font-weight: 500;
color:#1F2A37;
border-radius: 8px;
border:1px solid #E5E7EB;
text-decoration: none;
transition:.3s ease all;
&:hover{
background-color:#E5E7EB;
}
}
}
.daterangepicker .ranges{
margin-top: 0px;
border:0px;
position: absolute;
bottom:0px;
left: 0px;
width: 100%;
bottom:50px;
width: 100%;
padding-left: 8px;
padding-right: 8px;
}
.daterangepicker .ranges li{
margin:0px;
width: 100%;
min-height: 34px;
background-color:#1C45C2!important;
border-radius: 8px;
font-size: 12px;
text-align: center;
justify-content:center;
display: flex;
align-items:center;
cursor:pointer;
border:0px;
outline:none;
line-height: 16px;
color:#FFFFFF;
font-weight: 500;
transition:.3s ease all;
&:hover{
background-color:#1E429F!important;
}
}
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td{
min-width: 36px;
min-height: 34px;
height: 34px;
}
.daterangepicker td.active, .daterangepicker td.active:hover{
background-color:#1C45C2;
color:#fff!important;
}
.daterangepicker.show-ranges.single.ltr .drp-calendar.left{
border-left: 0px;
}
.daterangepicker .calendar-table th{
color:#6B7280;
font-weight: 600;
}
.daterangepicker .calendar-table th.month{
color:#111928;
}
.daterangepicker .calendar-table td{
font-size: 12px;
line-height: 150%;
color:#111928;
font-weight: bold;
}
.daterangepicker .calendar-table th.next{
background:url('../img/rangeright.svg');
background-repeat: no-repeat;
background-position:center;
background-size: 18px;
&>span{
display: none;
}
}
.regular__table>.top .switcher ul>li:last-child{
border-right: 0px;
}
.modal__side .modal__box .regular__box .bottom{
margin-top: 20px;
padding-bottom: 20px;
margin-bottom: -20px;
}
.emoji__box{
width: 335px;
border:1px solid #E5E7EB;
background-color:#FFFFFF;
border-radius: 6px;
position: absolute;
z-index: 10;
box-shadow:0px 8px 12px rgba(0,0,0,.04);
& .switch{
padding:12px 26px;
border-bottom:1px solid #E5E7EB;
& ul{
padding:0px;
list-style-type: none;
margin:0px;
display: flex;
&>li{
margin-right: 16px;
& a{
display: inline-flex;
align-items:center;
justify-content:center;
& svg{
max-width: 22px;
max-height: 20px;
}
}
&:last-child{
margin-right: 0px;
}
}
align-items:center;
justify-content:flex-start;
}
}
}
* {
outline:none!important;
}
.group__dropdown{
&.with__dot{
& .dropdown{
& ul{
& li a p{
margin:0px;
display: flex;
align-items:center;
justify-content:flex-start;
&>span{
display: inline-flex;
min-width: 8px;
max-width: 8px;
min-height: 8px;
max-height: 8px;
border-radius: 250px;
margin-right: 7px;
}
}
}
}
}
&>a{
&>span{
&>p{
margin:0px;
display: flex;
align-items:center;
justify-content:flex-start;
& span{
min-width: 10px;
max-width: 10px;
min-height: 10px;
max-height: 10px;
margin-right: 8px;
border-radius: 250px;
}
}
}
}
}
.group__dropdown .dropdown ul>li>a{
white-space: nowrap;
}
.group__dropdown .dropdown{
min-width: 100%;
width: auto;
right: 0px;
left: auto;
}
.table__wrapper .socs{
display: flex;
flex-direction:column;
align-items:flex-start;
& .phone{
& p{
margin:0px;
display: flex;
align-items:center;
justify-content:flex-start;
padding:4px 10px;
border-radius: 6px;
background-color:#D5F5F6;
font-size: 12px;
line-height: 150%;
font-weight: 500;
color:#54ABB9;
& span{
display: inline-flex;
align-items:center;
justify-content:center;
margin-right: 4px;
& svg{
width: 14px;
}
}
}
}
& .email{
margin-bottom: 4px;
&:last-child{
margin-bottom: 0px;
}
& p{
margin:0px;
display: flex;
align-items:center;
justify-content:flex-start;
padding:4px 10px;
border-radius: 6px;
background-color:#E9ECFB;
font-size: 12px;
line-height: 150%;
font-weight: 500;
color:#1C45C2;
& span{
display: inline-flex;
align-items:center;
justify-content:center;
margin-right: 4px;
& svg{
width: 14px;
}
}
}
}
}
.table__wrapper .profile{
display: flex;
align-items:center;
justify-content:flex-start;
&>span{
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 28px;
max-width: 28px;
min-height: 28px;
max-height: 28px;
border-radius: 250px;
font-size: 11px;
font-weight: 600;
margin-right: 10px;
}
&>p{
margin:0px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
}
.table__wrapper.smaller__space{
& table tr td{
padding-top: 9px;
padding-bottom: 9px;
}
}
.group__dropdown.regular>a{
box-shadow:none!important;
}
.group__dropdown.regular>a:hover{
background-color: transparent!important;
}
.regular__upload{
& .field{
position: relative;
display: flex;
align-items:center;
justify-content:flex-start;
&>input[type="text"]{
width: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
height: 42px;
border:1px solid #D1D5DB;
padding-left: 15px;
padding-right: 15px;
}
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 115px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#FFFFFF;
transition:.3s ease all;
&:hover{
background-color:#1C45C2;
}
min-height: 42px;
border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
background-color:#1F2A37;
text-decoration: none;
}
& input[type='file']{
position: absolute;
left: -25000px;
}
}
&>p{
margin-top: 0px;
margin-bottom: 12px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
}
.daterangepicker .ranges ul{
width: 100%!important;
}
.filter__btn{
position: relative;
& .filter__dropdown{
width: 600px;
padding:16px;
border-radius: 8px;
background-color:#fff;
box-shadow:0px 10px 15px rgba(0,0,0,.1);
position: absolute;
right: 0px;
left: auto;
top:46px;
& .segments__wrapper{
min-height: 105px;
margin-bottom: 20px;
}
&>ul{
padding:0px;
list-style-type: none;
margin:0px;
display: flex;
align-items:center;
justify-content:center;
border-radius: 8px;
border:1px solid #E5E7EB;
overflow:hidden;
margin-bottom: 24px;
& li{
border-right:1px solid #E5E7EB;
&:last-child{
border-right:0px;
}
width: 100%;
&>a{
display: flex;
align-items:center;
justify-content:center;
text-decoration: none;
min-height: 34px;
font-size: 14px;
line-height: 130%;
font-weight: 500;
color:#6B7280;
background-color:#F9FAFB;
&.current{
color:#111928;
background-color:#FFFFFF;
}
transition:.3s ease all;
&:hover{
color:#111928;
background-color:#FFFFFF;
}
}
}
}
& .btn{
display: flex;
justify-content:flex-end;
&>a{
min-height: 34px;
padding-left: 12px;
padding-right: 12px;
}
}
}
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 37px;
max-width: 37px;
min-height: 37px;
max-height: 37px;
border-radius: 8px;
border:1px solid #D1D5DB;
padding:0px;
}
}
.group__multiple{
position: relative;
& .dropdown{
position: absolute;
left: 0px;
width: 100%;
max-height: 200px;
top: 100%;
margin-top: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
overflow-y: auto;
padding:5px;
z-index: 3;
background-color: #fff;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
& ul{
padding:0px;
list-style-type: none;
margin:0px;
& li{
& label{
padding:8px;
}
& p{
margin:0px;
}
}
}
}
&>p{
margin-top: 0px;
margin-bottom: 8px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
& .box{
display: flex;
align-items:center;
justify-content:flex-start;
position: relative;
min-height: 40px;
border-radius: 8px;
cursor:pointer;
padding-top: 4px;
padding-bottom: 4px;
border:1px solid #D1D5DB;
padding-left: 12px;
&.opened{
&>span{
transform:rotate(180deg);
}
}
&>p{
margin:0px;
font-size: 14px;
line-height: 19px;
color:#6B7280;
}
& .tags{
display: flex;
align-items:center;
justify-content:flex-start;
margin-top: 0px;
margin-left: -4px;
flex-wrap:wrap;
&>.tag__el{
display: flex;
align-items:center;
justify-content:space-between;
padding:2px 10px;
border-radius: 6px;
background-color:#E9ECFB;
margin:4px;
font-size: 12px;
line-height: 150%;
font-weight: 500;
color:#1C45C2;
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
margin-left: 4px;
}
}
}
&>span{
position: absolute;
display: inline-flex;
align-items:center;
justify-content:center;
right: 12px;
transition:.3s ease all;
}
}
}
.custom__filter{
& .group__custom{
&>p{
margin-top: 0px;
margin-bottom: 15px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
}
}
.modal__side{
&.add__filter--side{
&>.inner__modal{
& .modal__box{
max-width: 725px;
& .add__filter--main{
& .filters__grid{
display: grid;
grid-template-columns:repeat(3 ,1fr);
& ul{
padding:0px;
list-style-type: none;
margin:0px;
&>li{
margin-bottom: 0px;
&>a{
display: flex;
align-items:center;
justify-content:space-between;
padding:8px 16px;
border-radius: 8px;
text-decoration: none;
font-size: 16px;
line-height: 150%;
font-weight: 400;
color:#111928;
position: relative;
&.current{
& span{
opacity:1;
}
}
& span{
margin-left: 8px;
opacity:0;
transition:.3s ease all;
display: flex;
align-items:center;
justify-content:center;
}
&.current{
background-color:#F9FAFB;
}
}
}
}
& .filter__box{
width: 100%;
border-right:1px solid #E5E7EB;
width: 100%;
padding:20px 16px;
&:last-child{
border-right:0px;
padding-right: 0px;
}
&.value{
padding-top:20px;
}
& .btn{
margin-top: 16px;
&>a{
min-height: 41px;
width: 100%;
}
}
& .group__input{
&>input{
width: 100%;
height: 42px;
border-radius: 8px;
outline:none;
border:1px solid #D1D5DB;
padding-left: 12px;
padding-right: 12px;
}
}
& .group__dropdown{
margin-bottom: 8px;
&>a{
width: 100%;
}
}
&:nth-child(1){
padding-left: 0px;
}
}
}
& .top{
margin-bottom: 15px;
& .group__input{
width: 100%;
position: relative;
& span{
display: inline-flex;
align-items:center;
justify-content:center;
position: absolute;
top:9px;
left: 16px;
}
&>input{
width: 100%;
height: 36px;
padding-left: 42px;
padding-right: 15px;
background-color:#F9FAFB;
border:1px solid #E5E7EB;
border-radius: 8px;
outline:none;
}
}
&>h6{
margin-top: 0px;
margin-bottom: 15px;
font-size: 24px;
line-height: 125%;
font-weight: 600;
color:#111928;
}
}
}
}
}
}
}
.filter__dropdown--btn>a.opened{
background-color:#F9FAFB;
}
.modal__side{
&.profile__side{
& .inner__modal{
&>.modal__box{
padding:0px;
max-width: 1235px;
& .double{
display: flex;
justify-content:space-between;
& .chat__box{
max-height: calc(100% - 53px);
}
& .contact__info{
& .contact__group{
margin-bottom: 24px;
display: flex;
align-items:flex-start;
justify-content:space-between;
&>.elem:nth-child(1){
width: 100%;
margin-right: 20px;
}
&>.elem:nth-child(2){
width: 100%;
min-width: 190px;
max-width: 190px;
&>.group__input{
&>input{
font-weight: 500;
min-height: 44px;
}
}
}
&>.elem{
&>ul{
padding:0px;
list-style-type: none;
margin:0px;
display: flex;
align-items:center;
justify-content:flex-start;
flex-wrap:wrap;
margin-left: -4px;
margin-top: -4px;
&>li{
display: flex;
font-size: 12px;
font-weight: 500;
align-items:center;
justify-content:flex-start;
& span{
display: inline-flex;
margin-right: 4px;
align-items:center;
justify-content:center;
}
padding:2px 10px;
border-radius: 6px;
margin:4px;
}
}
&>span{
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
& .tag__field{
padding:0px;
margin:0px;
}
&>p{
margin-top: 0px;
margin-bottom: 8px;
font-size: 14px;
line-height: 150%;
font-weight: 400;
color:#4B5563;
}
}
}
}
&>.contact__info{
padding:25px 32px;
& .add__new--attribute{
& .new__attribute--box{
width: 100%;
margin-top: 10px;
& .new__attribute{
display: flex;
align-items:center;
width: 100%;
justify-content:flex-start;
&>a{
white-space: nowrap;
}
& .group__dropdown{
width: 100%;
margin-right: 8px;
&>a{
min-height: 37px;
background-color:#F9FAFB;
border-color:#E5E7EB;
}
}
}
}
& + .row__table{
margin-top: 16px;
& .list__segments{
display: flex;
align-items:center;
flex-wrap:wrap;
margin-left: -4px;
margin-top: -4px;
justify-content:flex-start;
&>.el{
margin:4px;
padding:2px 10px;
font-size: 12px;
line-height: 150%;
font-weight: 500;
color:#111928;
border-radius: 6px;
background-color:#E5E7EB;
}
}
}
margin-top: 16px;
display: flex;
align-items:flex-start;
justify-content:flex-start;
flex-direction:column;
max-width: 390px;
width: 100%;
&>a{
display: inline-flex;
align-items:center;
text-decoration: none;
transition:.4s ease all;
&:hover{
opacity:.7;
}
justify-content:center;
& span{
display: inline-flex;
margin-right: 8px;
}
min-height: 37px;
border-radius: 8px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#1C45C2;
}
}
& .row__table{
&>p{
margin-top: 0px;
margin-bottom: 8px;
color:#4B5563;
font-size: 14px;
line-height: 150%;
}
margin-bottom: 24px;
&:last-child{
margin-bottom: 0px;
}
& .list__tables{
&>.elem__table{
display: flex;
align-items:center;
justify-content:flex-start;
border:1px solid #E5E7EB;
border-radius: 4px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
padding:10px 12px;
border-bottom:0px;
&:last-child{
border-bottom:1px solid #E5E7EB;
}
&:last-child{
border-bottom-left-radius: 4px;
border-bottom-right-radius: 0px;
}
&>p{
margin:0px;
font-size: 14px;
line-height: 150%;
font-weight: 400;
color:#111928;
&.colored{
color:#1C45C2;
}
}
&>span{
display: inline-flex;
min-width: 175px;
max-width: 175px;
margin-right: 20px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
}
}
}
&>ul{
padding:0px;
list-style-type: none;
margin:0px;
display: flex;
align-items:center;
margin-bottom: 24px;
justify-content:center;
&>li{
width: 100%;
border-right:1px solid #E5E7EB;
&:nth-child(1){
&>a{
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
}
&:last-child{
&>a{
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
}
&:last-child{
border-right:0px;
}
& a{
display: flex;
align-items:center;
justify-content:center;
padding-left: 15px;
padding-right: 15px;
min-height: 42px;
font-size: 14px;
line-height: 130%;
font-weight: 400;
color:#374151;
text-decoration: none;
transition:.3s ease background-color, .3s ease color;
&:hover{
color:#111928;
background-color:#F9F9F9;
font-weight: 500;
}
&.current{
color:#111928;
background-color:#F9F9F9;
font-weight: 500;
}
}
}
border-radius: 8px;
border:1px solid #E5E7EB;
}
border-right:1px solid #E5E7EB;
width: 100%;
max-width: 675px;
}
}
& .head{
display: flex;
align-items:center;
justify-content:space-between;
padding:10px 32px;
border-bottom:1px solid #EBEDF0;
& .right{
display: flex;
align-items:center;
justify-content:flex-end;
& .email__tags{
margin-right: 16px;
display: flex;
align-items:center;
justify-content:flex-start;
&>.el{
display: flex;
align-items:center;
justify-content:center;
min-height: 26px;
margin-right: 8px;
&:last-child{
margin-right: 0px;
}
border-radius: 4px;
padding-left: 8px;
padding-right: 8px;
font-size: 14px;
line-height: 125%;
font-weight: 500;
color:#4B5563;
background-color:rgba(229, 231, 235,.5);
}
}
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
text-decoration: none;
min-width: 26px;
max-width: 26px;
min-height: 26px;
max-height: 26px;
border-radius: 4px;
transition:.3s ease all;
margin-right: 12px;
&:last-child{
margin-right: 0px;
}
&:hover{
background-color:rgba(229, 231, 235,.3);
}
}
}
&>.left{
display: flex;
align-items:center;
justify-content:flex-start;
&>h6{
font-size: 16px;
line-height: 150%;
font-weight: 600;
color:#111928;
margin:0px;
margin-right: 8px;
}
& .tags{
display: flex;
align-items:center;
justify-content:flex-start;
& .tag{
display: flex;
align-items:center;
justify-content:flex-start;
padding:1px 6px;
border-radius: 5px;
font-size: 12px;
margin-right: 4px;
font-weight: 500;
min-height: 20px;
& span{
display: inline-flex;
margin-right: 4px;
}
}
}
&>span{
display: inline-flex;
align-items:center;
justify-content:center;
margin-right: 12px;
& img{
min-width: 32px;
max-width: 32px;
min-height: 32px;
max-height: 32px;
border-radius: 250px;
object-fit:cover;
}
}
}
}
}
}
}
}
.table__wrapper{
& .small{
font-size: 12px;
}
& .tag__box{
display: flex;
justify-content:flex-start;
& .tag__text{
margin:0px;
display: inline-flex;
align-items:center;
justify-content:center;
padding:1px 6px;
border-radius: 5px;
background-color:#E9ECFB;
font-size: 12px;
line-height: 150%;
font-weight: 500;
}
}
& .prof{
display: flex;
align-items:center;
justify-content:flex-start;
font-size: 12px;
& span{
display: inline-flex;
min-width: 14px;
max-width: 14px;
min-height: 14px;
max-height: 14px;
border-radius: 250px;
margin-right: 5px;
font-size: 8px;
line-height: 10px;
font-weight: bold;
align-items:center;
justify-content:center;
}
}
}
.table__wrapper .tasks{
display: flex;
align-items:center;
justify-content:flex-start;
font-size: 12px;
& span{
display: inline-flex;
margin-right: 4px;
}
}
.modal__side.manage__filters{
& .regular__box{
& .bottom{
display: grid;
grid-template-columns:repeat(2 ,1fr);
grid-column-gap:8px;
&>a , &>button{
display: flex;
align-items:center;
justify-content:center;
font-size: 14px;
min-height: 41px;
}
}
& .top{
&>.group__dropdown{
margin-bottom: 24px;
&:last-child{
margin-bottom: 0px;
}
}
&>h6{
margin-top: 0px;
margin-bottom: 32px;
font-size: 24px;
line-height: 125%;
font-weight: 600;
color:#111928;
}
}
}
}
.modal__side.add__lead{
& .bottom{
display: flex;
flex-direction:column;
align-items:center;
&>a{
width: 100%;
margin-bottom: 16px;
min-height: 41px;
align-items:center;
justify-content:center;
font-size: 14px;
&.add__leads.disabled{
background-color:#E5E7EB;
pointer-events:none;
color:#374151;
& svg path{
stroke:#4B5563;
}
}
&.add__leads{
& svg path{
transition:.3s ease all;
stroke:#fff;
}
}
&.add__leads--segment{
color:#1C45C2;
}
&:last-child{
margin-bottom: 0px;
}
}
}
& .entries__list{
margin-top: 24px;
&>p{
margin-top: 0px;
margin-bottom: 7px;
font-size: 14px;
line-height: 150%;
font-weight: 400;
color:#374151;
}
& .entries__wrap{
&>.elem__entry{
display: flex;
align-items:center;
justify-content:flex-start;
padding:12px;
border-radius: 8px;
transition:.3s ease all;
margin-bottom: 7px;
&.active{
border-color:#1C45C2;
}
&:last-child{
margin-bottom: 0px;
}
cursor:pointer;
border:1px solid #E5E7EB;
& .desc{
display: flex;
flex-direction:column;
align-items:flex-start;
&>p{
margin-top: 0px;
margin-bottom: 4px;
font-size: 14px;
line-height: 130%;
font-weight: 600;
color:#111928;
}
&>span{
font-size: 12px;
line-height: 150%;
font-weight: 500;
color:#6B7280;
}
}
&>span{
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 36px;
max-width: 36px;
min-height: 36px;
max-height: 36px;
border-radius: 250px;
margin-right: 8px;
font-size: 14px;
line-height: 130%;
font-weight: 600;
}
}
}
}
& .add__lead--box{
& .group__input{
width: 100%;
position: relative;
margin-top: 24px;
&>span{
display: inline-flex;
position: absolute;
left: 16px;
top:9px;
}
&>input{
height: 36px;
background-color:#F9FAFB;
padding-left: 42px;
padding-right: 16px;
font-size: 14px;
line-height: 130%;
font-weight: 400;
color:#111928;
border-radius: 8px;
border:1px solid #E5E7EB;
outline:none;
width: 100%;
}
}
&>h6{
margin-top: 0px;
margin-bottom: 8px;
font-size: 24px;
line-height: 125%;
font-weight: 600;
color:#111928;
}
&>p{
margin:0px;
font-size: 14px;
line-height: 150%;
color:#111928;
& a{
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#1C45C2;
text-decoration: none;
}
font-weight: 400;
}
}
}
.add__new--contact{
& .top{
& .type{
display: flex;
align-items:center;
justify-content:flex-start;
margin-bottom: 24px;
&>p{
margin:0px;
margin-right: 15px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
& .radios{
display: flex;
align-items:center;
justify-content:flex-start;
&>.container__radio{
margin-right: 16px;
&:last-child{
margin-right: 0px;
}
}
& .radio{
margin-right: 8px;
}
& p{
margin:0px;
font-size: 14px;
line-height: 14px;
font-weight: 500;
color:#111928;
}
}
}
&>.new__contact{
& .regular__upload{
margin-bottom: 24px;
margin-top: 24px;
}
& .group__dropdown{
width: 100%;
margin-bottom: 16px;
&>a{
width: 100%;
height: 42px;
&>span{
font-weight: 400;
font-size: 14px;
}
}
}
&>h6{
margin-top: 0px;
margin-bottom: 33px;
font-size: 24px;
line-height: 125%;
font-weight: 600;
color:#111928;
}
&>.group__input{
margin-bottom: 16px;
}
}
}
& .bottom{
&>a{
width: 100%;
min-height: 41px;
}
}
}
.add__new--contact .new__contact>p.leads{
margin-top: -25px;
font-size: 14px;
line-height: 150%;
font-weight: 400;
color:#111928;
& span{
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 10px;
max-width: 10px;
min-height: 10px;
max-height: 10px;
margin-right: 8px;
border-radius: 250px;
}
}
.modal__side.add__from--segment{
& .segment__wrapper{
&>p{
margin-top: 0px;
margin-bottom: 24px;
display: flex;
align-items:center;
justify-content:flex-start;
font-size: 14px;
line-height: 150%;
font-weight: 400;
color:#111928;
& span{
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 10px;
max-width: 10px;
min-height: 10px;
max-height: 10px;
border-radius: 250px;
margin-right: 8px;
}
}
&>h6{
margin-top: 0px;
margin-bottom: 8px;
font-size: 24px;
line-height: 125%;
font-weight: 600;
color:#111928;
}
}
& .bottom{
& .regular-btn{
width: 100%;
min-height: 41px;
}
}
}
.dropdown__sales{
z-index: 8;
position: absolute;
background-color:#FFFFFF;
border-radius: 8px;
overflow:hidden;
box-shadow:0px 4px 6px rgba(0,0,0,.1);
& ul{
padding:0px;
list-style-type: none;
margin:0px;
&>li{
&>a{
display: flex;
align-items:center;
justify-content:flex-start;
text-decoration: none;
white-space: nowrap;
font-size: 14px;
line-height: 130%;
font-weight: 400;
color:#4B5563;
padding:8px 16px;
transition:.3s ease all;
&:hover{
color:#111928;
& svg path{
fill:#111928;
}
background-color:#F9FAFB;
}
& span{
& svg path{
transition:.3s ease all;
}
display: inline-flex;
margin-right: 4px;
}
}
}
}
}
.modal__wrapper.remove__popup{
& .modal__box{
max-width: 605px;
background-color:#FFFFFF;
border:1px solid #E5E7EB;
overflow:hidden;
border-radius: 8px;
& .controls{
display: flex;
justify-content:flex-end;
align-items:center;
padding:16px 24px;
& .cancel{
min-height: 48px;
display: inline-flex;
align-items:center;
justify-content:center;
text-decoration: none;
padding-left: 20px;
padding-right: 20px;
color:#0E1217;
font-size: 16px;
font-weight: 500;
transition:.3s ease all;
&:hover{
opacity:.7;
}
}
& .delete-btn{
display: inline-flex;
align-items:center;
justify-content:center;
min-height: 48px;
border-radius: 8px;
background-color:#E02424;
margin-left: 8px;
text-decoration: none;
font-size: 16px;
line-height: 24px;
color:#FFFFFF;
font-weight: 500;
padding-left: 20px;
padding-right: 20px;
transition:.3s ease all;
&:hover{
background-color:#b63232;
}
}
}
& .desc{
margin-top: 16px;
& p{
margin:0px;
font-size: 16px;
line-height: 24px;
color:#374151;
font-weight: 400;
& span{
font-weight: 600;
}
}
padding-left: 24px;
padding-right: 24px;
border-bottom:1px solid #E5E7EB;
padding-bottom: 24px;
}
&>.top{
display: flex;
padding-top: 24px;
padding-left: 24px;
padding-right: 24px;
align-items:center;
justify-content:space-between;
&>p{
margin:0px;
font-size: 18px;
line-height: 140%;
font-weight: 600;
color:#0E1217;
}
&>a{
display: inline-flex;
}
}
}
}
.modal__side.add__automation{
& .bottom{
width: 100%;
&>a{
width: 100%;
min-height: 41px;
font-size: 14px;
}
}
& .automation__wrapper{
& .actions{
margin-top: 32px;
& .actions__list{
margin-top: 16px;
&>.elem__action{
margin-bottom: 8px;
border-radius: 8px;
border:1px solid #D1D5DB;
display: flex;
align-items:center;
justify-content:space-between;
& .controls{
display: flex;
align-items:center;
margin-left: 10px;
justify-content:flex-end;
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 30px;
max-width: 30px;
min-height: 30px;
transition:.3s ease all;
max-height: 30px;
border-radius: 4px;
margin-right: 8px;
&.trash__btn{
&:hover{
background-color:rgba(240,82,82,0.15);
}
}
&:hover{
background-color:#F9FAFB;
}
&:last-child{
margin-right: 0px;
}
}
}
& .desc{
display: flex;
flex-direction:column;
align-items:flex-start;
&>p{
margin-top: 0px;
margin-bottom: 4px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
&>span{
font-size: 14px;
line-height: 150%;
font-weight: 400;
color:#4B5563;
}
}
padding:12px;
&:last-child{
margin-bottom: 0px;
}
}
}
& .add__action{
padding:16px;
margin-top: 15px;
& .group__dropdown{
margin-bottom:16px;
}
& .controls{
display: flex;
justify-content:flex-end;
align-items:center;
margin-top: 16px;
&>.cancel{
font-size: 12px;
color:#1C45C2;
font-weight: 500;
text-decoration: none;
transition:.3s ease all;
&:hover{
opacity:.7;
}
}
&>.add{
font-size: 12px;
padding-left: 12px;
padding-right: 12px;
min-height: 34px;
margin-left: 16px;
}
}
&>p{
margin-top: 0px;
margin-bottom: 24px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
border-radius: 8px;
border:1px solid #D1D5DB;
}
&>.title{
display: flex;
justify-content:space-between;
&>a{
display: inline-flex;
align-items:center;
justify-content:flex-start;
text-decoration: none;
font-size: 14px;
line-height: 130%;
font-weight: 500;
color:#1C45C2;
transition:.3s ease all;
&:hover{
opacity:.7;
}
& span{
display: inline-flex;
align-items:center;
justify-content:center;
margin-right: 8px;
}
}
&>p{
margin:0px;
font-size: 18px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
}
}
& .group__dropdown{
margin-bottom: 24px;
}
& .type{
display: flex;
align-items:center;
margin-top: 24px;
margin-bottom: 32px;
justify-content:flex-start;
& .radios{
display: flex;
align-items:center;
justify-content:flex-start;
&>.container__radio{
margin-right: 16px;
display: flex;
align-items:center;
justify-content:flex-start;
& p{
margin:0px;
font-size: 14px;
font-weight: 500;
color:#111928;
margin-left: 8px;
}
}
}
&>p{
margin:0px;
margin-right: 16px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
}
&>p{
margin:0px;
display: flex;
align-items:center;
justify-content:flex-start;
font-size: 14px;
line-height: 150%;
font-weight: 400;
color:#111928;
margin-bottom: 24px;
& span{
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 10px;
max-width: 10px;
min-height: 10px;
max-height: 10px;
border-radius: 250px;
margin-right: 8px;
}
}
&>h6{
margin-top: 0px;
margin-bottom: 8px;
font-size: 24px;
line-height: 125%;
font-weight: 600;
color:#111928;
}
}
}
.add__action{
& .controls{
& .regular-btn{
&.disabled{
pointer-events:none;
background-color: #E5E7EB;
pointer-events: none;
color: #374151;
& svg path{
fill:#374151;
}
}
}
}
}
.group__input.field__with--info{
& .btns{
display: flex;
align-items:center;
justify-content:flex-start;
&>div{
display: inline-flex;
margin-right: 15px;
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
}
&:last-child{
margin-right: 0px;
}
}
}
}
.modal__wrapper{
&.confirm__campaign{
& .inner__modal{
& .modal__box{
width: 100%;
border-radius: 8px;
background-color:#FFFFFF;
border:1px solid #E5E7EB;
max-width: 605px;
& .top__part{
padding:24px;
padding-bottom: 0px;
}
& .controls{
display: flex;
justify-content:flex-end;
align-items:center;
padding:16px 24px;
border-top:1px solid #E5E7EB;
&>.regular-btn{
min-height: 48px;
padding-left: 20px;
padding-right: 20px;
font-size: 16px;
margin-left: 8px;
}
&>.cancel-btn{
min-height: 48px;
padding-left: 20px;
padding-right: 20px;
text-decoration: none;
font-size: 16px;
line-height: 150%;
font-weight: 500;
color:#1C45C2;
display: flex;
align-items:center;
justify-content:center;
transition:.3s ease all;
&:hover{
opacity:.7;
}
}
}
& .desc{
margin-bottom: 24px;
&>p{
font-size: 16px;
line-height: 24px;
color:#374151;
font-weight: 400;
margin-top: 0px;
margin-bottom: 15px;
&:last-child{
margin-bottom: 0px;
}
}
}
& .top{
display: flex;
align-items:center;
margin-bottom: 16px;
justify-content:space-between;
&>p{
margin:0px;
font-size: 18px;
line-height: 140%;
font-weight: 600;
color:#0E1217;
}
&>a{
display: inline-flex;
margin-left: 10px;
}
}
}
}
}
}
.tag__field{
margin-top: 24px;
padding-left: 24px;
padding-right: 24px;
position:relative;
& .dropdown{
position: absolute;
left:24px;
width: calc(100% - 48px);
top:100%;
margin-top: 6px;
border-radius: 6px;
border:1px solid #E5E7EB;
background-color:#fff;
padding:16px 8px;
max-height: 240px;
overflow-y:auto;
&::-webkit-scrollbar {
width: 6px;
height: 4px;
}
&::-webkit-scrollbar-track {
}
&::-webkit-scrollbar-thumb {
border-radius: 250px;
background-color:rgb(28,69,194);
}
& ul{
padding:0px;
list-style-type: none;
margin:0px;
&>li{
margin-bottom: 0px;
margin-bottom: 2px;
&:last-child{
margin-bottom: 0px;
}
&>a{
padding:8px 16px;
display: flex;
align-items:center;
border-radius: 8px;
&.current{
background-color:#E9ECFB!important;
color:#1C45C2!important;
}
&:hover{
background-color:#F9FAFB;
}
justify-content:flex-start;
font-size: 14px;
line-height: 130%;
font-weight: 400;
color:#0E1217;
text-decoration: none;
transition:.3s ease all;
}
}
}
}
& .list{
display: flex;
align-items:center;
justify-content:flex-start;
padding:6px 11px;
flex-wrap:wrap;
margin-left: -4px;
margin-top: 0px;
&>.elem{
display: flex;
align-items:center;
justify-content:flex-start;
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
margin-left: 4px;
}
& p{
margin:0px;
font-size: 12px;
line-height: 150%;
font-weight: 500;
color:#1C45C2;
width : auto;
max-width: 145px;
overflow:hidden;
display:inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 10px;
border-radius: 6px;
background-color:#E9ECFB;
margin:4px;
}
}
& .field{
position: relative;
border:1px solid #D1D5DB;
min-height: 44px;
border-radius: 8px;
transition:.3s ease all;
cursor:pointer;
&.filled{
&>span{
top:-11px;
left: 10px;
font-size: 12px;
line-height: 12px;
}
}
&.focused{
border-color:#1C45C2;
&>span{
color:#1C45C2;
top:-11px;
left: 10px;
font-size: 12px;
line-height: 12px;
}
}
&>span{
position: absolute;
left: 12px;
top:8px;
font-size: 14px;
line-height: 18px;
font-weight: 400;
color:#6B7280;
padding:4px;
background-color:#fff;
transition:.3s ease all;
}
}
}
.upload__file--wrapper{
position: relative;
&>input{
position: absolute;
left: -25000px;
}
&>a.draggable__box{
display: flex;
flex-direction:column;
align-items:center;
justify-content:center;
height: 172px;
border-radius: 8px;
padding-left: 12px;
padding-right: 12px;
text-align: center;
border:2px dashed #E5E7EB;
text-decoration: none;
background-color:#F9FAFB;
&>p{
margin:0px;
font-size: 14px;
line-height: 150%;
margin-top: 7px;
font-weight: 400;
color:#6B7280;
& span{
font-weight: 600;
}
}
&>span{
display: inline-flex;
margin-bottom: 7px;
align-items:center;
justify-content:center;
}
}
}
.file__list{
margin-top:15px;
& .elem__file{
margin-bottom: 7px;
display: flex;
border-radius: var(--Corner-radius-Rd---xs, 8px);
border: 1px solid var(--Color-Main-Border, #E7E7E8);
background: #FBFBFC;
padding:8px;
&>.right{
display: flex;
justify-content:flex-end;
align-items:center;
& .progress__box{
display: flex;
align-items:center;
justify-content:flex-end;
width: 140px;
&>.progress{
width: 100%;
display: flex;
position: relative;
height: 4px;
background-color:#E7E7E8;
border-radius: 5px;
& .active{
position: absolute;
left: 0px;
top:0px;
height: 100%;
border-radius: 5px;
background-color:#009697;
}
}
&>p{
margin:0px;
margin-left: 8px;
font-size: 12px;
line-height: 150%;
font-weight: 400;
color:#272831;
}
}
&>a{
display: inline-flex;
margin-left: 16px;
}
}
&>.left{
display: flex;
align-items:center;
justify-content:flex-start;
&>.desc{
display: flex;
flex-direction:column;
align-items:flex-start;
&>p{
margin-top:0px;
font-size: 14px;
line-height: 140%;
font-weight: 600;
color:#0F101A;
margin-bottom: 0px;
}
&>span{
font-size: 12px;
line-height: 150%;
font-weight: 400;
color:#57585F;
}
}
&>.media{
display: flex;
align-items:center;
margin-right: 12px;
justify-content:center;
min-width: 38px;
max-width: 38px;
min-height: 38px;
max-height: 38px;
border-radius: var(--Corner-radius-Rd---xxs, 4px);
border: 1px solid var(--Color-Main-Border, #E7E7E8);
background: var(--Color-Gray-scale-Gray00, #FFF);
}
}
justify-content:space-between;
&:last-child{
margin-bottom: 0px;
}
}
}
.error__float{
position: fixed;
bottom:15px;
right: 15px;
max-width: 640px;
padding:16px;
border:1px solid #F8B4B4;
border-radius: 6px;
background-color:#fff;
z-index: 8;
& .inner{
display: flex;
align-items:center;
justify-content:space-between;
& .right{
display: inline-flex;
align-items:center;
justify-content:center;
margin-left: 12px;
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
}
}
& .left{
display: flex;
align-items:center;
justify-content:flex-start;
&>p{
margin:0px;
font-size: 14px;
line-height: 150%;
font-weight: 400;
color:#F05252;
}
&>span{
display: inline-flex;
align-items:center;
margin-right: 10px;
justify-content:center;
& svg{
min-width: 32px;
max-width: 32px;
}
}
}
}
}
.side__inner--menu{
min-width: 220px;
max-width: 220px;
border-right: 1px solid #E5E7EB;
background-color: #fff;
overflow-y: auto;
padding: 24px;
}
.box__with--info{
width: 100%;
}
.box__with--info{
min-height:calc(100vh - 52.8px);
}
.box__with--menu{
display: flex;
justify-content:space-between;
}
.box__with--menu{
& .side__inner--menu{
padding:24px;
&>.elem{
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom:1px solid #E5E7EB;
& .double__title{
display: flex;
align-items:center;
justify-content:space-between;
margin-bottom: 12px;
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
}
&>p{
margin:0px;
font-size: 12px;
line-height: 150%;
font-weight: 500;
color:#6B7280;
}
}
&:last-child{
margin-bottom: 0px;
padding-bottom: 0px;
border-bottom:0px;
}
& ul{
padding:0px;
list-style-type: none;
margin:0px;
&>li{
margin-bottom: 4px;
&.current{
&>a{
background-color:#F9FAFB;
}
}
& a.current{
background-color:#F9FAFB;
}
&>a{
display: flex;
align-items:center;
justify-content:flex-start;
text-decoration: none;
padding:8px;
border-radius: 8px;
font-size: 14px;
line-height: 150%;
color:#1F2A37;
font-weight: 500;
transition:.3s ease all;
&:hover{
background-color:#F9FAFB;
}
& span{
display: inline-flex;
margin-right: 8px;
}
}
&:last-child{
margin-bottom: 0px;
}
}
}
&>p{
margin-top: 0px;
margin-bottom: 12px;
font-size: 12px;
line-height: 150%;
font-weight: 500;
color:#6B7280;
}
}
}
}
.no__data{
text-align: center;
padding:23px 0px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#6B7280;
}
.box__with--info.with__menu{
width: calc(100% - 220px);
}
.copy__text{
display: inline-flex;
&>p{
margin:0px;
font-size: 12px;
line-height: 150%;
font-weight: 500;
color:#4B5563;
}
& a{
display: inline-flex;
margin-left: 4px;
}
padding:2px 6px;
background-color:#F3F4F6;
border-radius: 4px;
align-items:center;
justify-content:flex-start;
}
.upload__file--wrapper{
& .size{
margin:0px!important;
font-size: 12px!important;
line-height: 18px!important;
color:#6B7280;
margin-top: 7px!important;
font-weight: 600!important;
}
}
.file__list .elem__file>.left>.desc>p{
word-break:break-all;
}
.jb-emoji{
position: absolute;
left: 200px;
top:200px;
width: 100%;
max-width: 335px;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
}
&::-webkit-scrollbar-thumb {
border-radius: 250px;
background-color:rgb(28,69,194);
}
& .jb-emoji-search{
border:1px solid #E5E7EB;
border-radius: 8px;
height: 40px;
padding-left: 12px;
padding-right: 12px;
}
& .jb-emoji-grid{
display: grid;
grid-template-columns:repeat(8 , 1fr);
& .jb-emoji-btn{
width: auto;
height: auto;
font-size: 16px;
}
}
}
.emoji__picker.active{
& svg path{
fill:#1C45C2;
}
}
.jb-emoji-btn:hover, .jb-emoji-btn.jb-active-emoji{
background-color:#E9ECFB!important;
}
.modal__wrapper .remove__chat .controls .delete-btn{
margin-right: 0px;
}
.modal__wrapper{
& .inner__modal{
& .new__tag{
background-color:#fff;
width: 100%;
max-width: 605px;
border-radius: 8px;
border:1px solid #E5E7EB;
& form{
& .color__wrap{
padding-top: 24px;
margin-top: 24px;
border-top:1px solid #E7E7E8;
& .colors__box{
display: flex;
align-items:center;
justify-content:flex-start;
flex-wrap:wrap;
margin-left: -4px;
margin-top: -4px;
&>a{
&.current{
border:2px solid #1C45C2;
}
&.new{
background-color:#F9FAFB;
}
margin:4px;
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 36px;
max-width: 36px;
min-height: 36px;
max-height: 36px;
border-radius: 2500px;
&.white{
border:2px solid #E5E7EB;
}
}
}
&>p{
margin-top: 0px;
margin-bottom: 16px;
font-size: 14px;
line-height: 150%;
color:#1F2A37;
font-weight: 600;
}
}
& .group__dropdown{
&>a{
height: 50px;
}
&>span{
font-weight: 600;
color:#1F2A37;
}
}
padding:32px 24px;
& .float__group{
margin-bottom: 24px;
&.focused, &.final__state{
&>span{
top:-3px;
}
}
&>span{
font-weight: 600;
color:#1F2A37;
top:14px;
}
&>input{
height: 50px;
}
}
}
& .controls{
display: flex;
justify-content:flex-end;
align-items:center;
border-top:1px solid #E5E7EB;
padding:24px;
& .regular-btn{
display: flex;
align-items:center;
justify-content:center;
min-height: 48px;
font-size: 16px;
background-color:#111928;
transition:.3s ease all;
padding-left: 20px;
padding-right: 20px;
&:hover{
background-color:#1C45C2;
}
}
&>.cancel-btn{
min-height: 48px;
display: flex;
padding-left: 20px;
padding-right: 20px;
align-items:center;
justify-content:center;
border-radius: 8px;
font-size: 16px;
line-height: 150%;
color:#1C45C2;
font-weight: 500;
text-decoration: none;
margin-right: 8px;
transition:.3s ease all;
&:hover{
opacity:.7;
}
}
}
& .title{
display: flex;
align-items:center;
justify-content:space-between;
padding:24px;
border-bottom:1px solid #E5E7EB;
&>p{
margin:0px;
font-size: 18px;
line-height: 150%;
font-weight: bold;
color:#111928;
}
&>a{
display: inline-flex;
align-items:center;
}
}
}
}
}
.jb-emoji{
z-index: 9;
}
.table__wrapper{
& .info__box{
display: flex;
justify-content:flex-end;
align-items:center;
& .lists{
display: flex;
align-items:center;
justify-content:flex-start;
margin-right: 16px;
&>.elem{
display: flex;
padding:2px 4px;
border-radius: 4px;
align-items:center;
margin-right: 8px;
&:last-child{
margin-right: 0px;
}
justify-content:flex-start;
&>p{
margin:0px;
display: flex;
font-size: 14px;
line-height: 125%;
font-weight: 500;
align-items:center;
justify-content:flex-start;
& span{
display: inline-flex;
margin-right: 4px;
}
}
}
}
}
}
.title__link{
font-size: 14px;
text-decoration: none;
max-width: 300px;
}
.title__link--td{
width: 400px;
}
.table__wrapper tr th>p{
display: flex;
align-items:center;
justify-content:flex-start;
&>a{
display: inline-flex;
margin-right: 4px;
}
}
.dropdown__segments{
min-width: 250px;
max-width: 250px;
box-shadow:0px 4px 6px rgba(0,0,0,.1);
border-radius: 8px;
background-color:#fff;
padding:4px 0px;
position: absolute;
left: 200px;
top:200px;
z-index: 4;
& ul{
padding:0px;
list-style-type: none;
margin:0px;
&>li{
&>a{
display: flex;
align-items:center;
justify-content:flex-start;
text-decoration: none;
padding:8px 16px;
font-size: 14px;
line-height: 130%;
font-weight: 400;
transition:.4s ease all;
&:hover{
background-color:#F9FAFB;
color:#111928;
}
&.disabled{
opacity:.6;
pointer-events:none;
}
color:#4B5563;
& span{
display: inline-flex;
margin-right: 4px;
& svg path{
fill:#4B5563;
}
}
& span{
display: inline-flex;
}
}
}
}
}
.settings__segment--btn.opened{
background-color:#F9FAFB!important;
}
.modal__wrapper{
&.create__folder{
& .inner__modal{
& .modal__box{
width: 100%;
max-width: 400px;
border-radius: 8px;
background-color:#FFFFFF;
padding:24px;
& .btns{
display: flex;
justify-content:flex-end;
& .regular-btn{
display: inline-flex;
align-items:center;
justify-content:center;
min-height: 37px;
font-size: 14px;
}
& .cancel-btn{
display: inline-flex;
align-items:center;
justify-content:center;
min-height: 37px;
border-radius: 8px;
margin-right: 8px;
padding-left: 11px;
padding-right: 11px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#1C45C2;
text-decoration: none;
transition:.3s ease all;
&:hover{
opacity:.7;
}
}
}
& .fields{
margin-bottom: 16px;
}
& .top{
display: flex;
align-items:center;
margin-bottom: 24px;
justify-content:space-between;
&>p{
margin:0px;
font-size: 18px;
line-height: 140%;
font-weight: 600;
color:#0E1217;
}
&>a{
display: inline-flex;
}
}
}
}
}
}
.modal__side.lead__info{
& .bottom{
display: grid;
grid-template-columns:repeat(2 ,1fr);
grid-column-gap:8px;
&>a{
display: inline-flex;
min-height: 41px;
border-radius: 8px;
font-size: 14px;
justify-content:center;
align-items:center;
}
}
& .lead__info{
& .box{
margin-bottom: 8px;
border:1px solid #E5E7EB;
border-radius: 8px;
padding:16px;
& .grid{
display: flex;
align-items:flex-start;
justify-content:flex-start;
&>.elem{
margin-right: 64px;
&>span{
font-size: 18px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
&>p{
margin:0px;
display: flex;
align-items:center;
justify-content:flex-start;
margin-bottom: 4px;
& span{
display: inline-flex;
margin-right: 8px;
}
font-size: 14px;
line-height: 150%;
font-weight: 400;
color:#6B7280;
}
&:last-child{
margin-right: 0px;
}
}
}
& .list{
& ul{
padding:0px;
list-style-type: none;
margin:0px;
&>li{
margin-bottom: 11px;
&:last-child{
margin-bottom: 0px;
}
display: flex;
align-items:flex-start;
justify-content:flex-start;
&>p{
margin:0px;
font-size: 16px;
line-height: 150%;
font-weight: 400;
color:#111928;
& .desc{
padding:2px 4px;
font-size: 14px;
font-weight: 400;
color:#111928;
border-radius: 4px;
background-color:#E5E7EB;
}
& span.medium{
font-weight: 600;
}
}
&>span{
display: inline-flex;
margin-right: 8px;
}
}
}
}
& .headline{
margin-bottom: 16px;
&>p{
margin:0px;
display: flex;
align-items:center;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#6B7280;
justify-content:flex-start;
&>span{
display: inline-flex;
margin-right: 9px;
}
}
}
&:last-child{
margin-bottom: 0px;
}
}
&>h6{
margin-top: 0px;
margin-bottom: 8px;
font-size: 24px;
line-height: 125% ;
font-weight: 600;
color:#111928;
}
&>ul{
padding:0px;
list-style-type: none;
margin:0px;
display: flex;
margin-bottom: 24px;
align-items:center;
justify-content:flex-start;
flex-wrap:wrap;
&>li.spacer{
display: flex;
align-items:center;
justify-content:center;
margin:0px 10px;
}
&>li{
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#6B7280;
}
}
& .tag{
margin-bottom: 8px;
display: flex;
justify-content:flex-start;
align-items:center;
&>span{
display: inline-flex;
padding:2px 4px;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
}
}
}
}
th p.regular{
font-weight: 400;
text-transform: capitalize;
}
.breadcrumbs.double{
display: flex;
justify-content:space-between;
& .edit__layout{
display: flex;
align-items:center;
justify-content:flex-end;
& .add__report{
position: relative;
& .dropdown{
position: absolute;
top:44px;
right: 0px;
min-width: 240px;
max-width: 240px;
box-shadow:0px 4px 6px rgba(0,0,0,0.1);
background-color:#fff;
border-radius: 8px;
z-index: 3;
& ul{
padding:0px;
list-style-type: none;
margin:0px;
display: flex;
flex-direction:column;
align-items:flex-start;
&>li{
width: 100%;
&>a{
width: 100%;
&:hover{
background-color:#F9FAFB;
}
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
text-decoration: none;
padding: 8px 16px;
font-size: 14px;
color: #374151;
-webkit-transition: .3s ease all;
transition: .3s ease all;
}
}
}
}
&>a{
&.opened{
background-color:#1C45C2;
&>svg{
transform:rotate(180deg);
}
}
display: inline-flex;
align-items:center;
justify-content:space-between;
min-height: 36px;
border-radius: 8px;
padding-left: 12px;
padding-right: 12px;
text-decoration: none;
background-color:#111928;
transition:.3s ease all;
&:hover{
background-color:#1C45C2;
}
&>span{
display: inline-flex;
margin-right: 8px;
font-size: 14px;
line-height: 150%;
font-weight: 500;
color:#FFFFFF;
}
&>svg{
transition:.3s ease all;
}
}
}
& .switch{
display: flex;
flex-direction:row-reverse;
margin-right: 24px;
&>p{
margin:0px;
margin-right: 12px;
font-size: 14px;
line-height: 130%;
font-weight: 400;
color:#6B7280;
}
}
}
}
.table__wrapper .tag{
display: inline-flex;
min-height: 22px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
border-radius: 6px;
}
.show__data{
display: flex;
align-items:center;
justify-content:flex-start;
width: 100%;
max-width: 360px;
& .dropdown__check{
width: 100%;
max-width: 255px;
position: relative;
& .dropdown{
position: absolute;
top:100%;
left: 0px;
background-color:#fff;
z-index: 3;
width: 100%;
overflow-y:auto;
max-height: 200px;
padding:5px 0px;
& ul{
padding:0px;
list-style-type: none;
margin:0px;
&>li{
& label{
cursor:pointer;
padding:7px 15px;
}
}
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
}
&::-webkit-scrollbar-thumb {
border-radius: 250px;
background-color:rgb(28,69,194);
}
width: 100%;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
&>a{
display: inline-flex;
align-items:center;
justify-content:space-between;
padding-left: 12px;
padding-right: 12px;
text-decoration: none;
border:1px solid #D1D5DB;
border-radius: 8px;
height: 37px;
width: 100%;
&>svg{
transition:.3s ease all;
}
&.opened{
&>svg{
transform:rotate(180deg);
}
}
&>span{
overflow:hidden;
display:inline-block;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100% - 20px);
overflow:hidden;
white-space: nowrap;
font-size: 12px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
}
}
&>p{
margin:0px;
margin-right: 15px;
font-size: 12px;
line-height: 150%;
white-space: nowrap;
font-weight: 500;
color:#4B5563;
}
}
.segment__item{
display: flex;
justify-content:flex-start;
&>p{
margin:0px;
display: flex;
align-items:center;
justify-content:flex-start;
padding-left: 10px;
padding-right: 10px;
min-height: 25px;
border-radius: 6px;
& span{
display: inline-flex;
margin-left: 4px;
}
}
}
.table__wrapper{
& .product__name{
& p{
margin:0px;
display: flex;
align-items:center;
justify-content:flex-start;
font-size: 14px;
&>span{
display: inline-flex;
min-width: 18px;
max-width: 18px;
align-items:center;
justify-content:center;
margin-right: 10px;
}
}
}
}
.dashboard__tooltip{
position: absolute;
z-index: 5;
border-radius: 6px;
background-color:#1F2A37;
max-width: 290px;
&>p{
margin:0px;
font-size: 14px;
line-height: 150%;
font-weight: 400;
color:#F9FAFB;
}
padding:8px;
}
.table__wrapper{
& .status{
margin-right: 16px;
& span{
display: inline-flex;
align-items:center;
justify-content:center;
min-height: 23px;
padding-top: 1px;
padding-left: 10px;
padding-right: 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
}
}
}
.modal__wrapper{
& .modal__box{
width: 100%;
max-width: 440px;
background-color:#FFFFFF;
border-radius: 8px;
& .controls{
display: flex;
align-items:center;
justify-content:flex-end;
padding:20px 24px;
padding-bottom: 25px;
&>.regular-btn{
}
&>.cancel-btn{
display: inline-flex;
align-items:center;
justify-content:center;
text-decoration: none;
min-height: 37px;
border-radius: 8px;
padding-left: 12px;
padding-right: 12px;
font-size: 14px;
margin-right: 8px;
line-height: 150%;
font-weight: 500;
color:#1C45C2;
transition:.3s ease all;
&:hover{
opacity:.7;
}
}
}
& .manage__box{
padding-left: 24px;
padding-right: 24px;
padding-bottom: 24px;
border-bottom:1px solid #E5E7EB;
& .manage__grid{
display: grid;
grid-template-columns:repeat(2 ,1fr);
grid-row-gap:12px;
grid-column-gap:15px;
&>.elem{
& .container__check{
cursor:pointer;
}
& .checkmark{
margin-right: 0px;
}
& p{
margin:0px;
margin-left: 8px;
font-size: 14px;
line-height: 150%;
font-weight: 400;
color:#111928;
}
}
}
&>p{
margin-top:0px;
margin-bottom: 15px;
font-size: 14px;
line-height: 150%;
font-weight: 400;
color:#6B7280;
}
}
&>.top{
display: flex;
align-items:center;
justify-content:space-between;
padding-left: 24px;
padding-right: 24px;
padding-top: 24px;
margin-bottom: 20px;
&>p{
margin:0px;
font-size: 18px;
line-height: 140%;
font-weight: 600;
color:#0E1217;
}
&>a{
display: inline-flex;
text-decoration: none;
transition:.3s ease all;
&:hover{
opacity:.7;
}
}
}
}
}
.modal__side.ongoing{
& .regular__box{
& .bottom{
display: grid;
grid-template-columns:repeat(2 ,1fr);
grid-column-gap:8px;
&>a{
display: inline-flex;
width: 100%;
height: 41px;
font-size: 14px;
align-items:center;
justify-content:center;
&.outline-btn{
color:#1C45C2;
}
}
}
& .top{
& .after{
&>p{
margin:0px;
font-size: 12px;
line-height: 140%;
font-weight: 500;
color:#6B7280;
}
}
& .field{
margin-bottom: 24px;
& .inner__field{
display: flex;
align-items:center;
justify-content:space-between;
& .hours{
width: 100%;
display: flex;
align-items:center;
justify-content:flex-start;
&>.group__input{
width: 100%;
max-width: 64px;
margin-right: 8px;
&:last-child{
margin-right: 0px;
}
& input{
width: 100%;
height: 42px;
border-radius: 8px;
border:1px solid #D1D5DB;
padding-left: 12px;
padding-right: 12px;
font-size: 14px;
color:#0E1217;
}
}
}
& .date{
width: 100%;
max-width: 195px;
margin-right: 8px;
& input{
width: 100%;
height: 42px;
border-radius: 8px;
border:1px solid #D1D5DB;
padding-left: 15px;
padding-right: 35px;
}
}
}
&>p{
margin-top: 0px;
margin-bottom: 8px;
font-size: 12px;
line-height: 14px;
color:#6B7280;
font-weight: 500;
}
&:nth-child(3){
margin-bottom: 16px;
}
}
&>h6{
margin-top: 0px;
margin-bottom: 24px;
font-size: 24px;
line-height: 125%;
font-weight: 600;
color:#111928;
}
}
}
}
.new__criteria.modal__side{
& .inner__modal{
& .modal__box{
max-width: 575px;
}
}
& .regular__box{
& .bottom{
display: flex;
align-items:center;
justify-content:space-between;
& .right{
display: flex;
align-items:center;
justify-content:flex-end;
&>a{
margin-right: 8px;
padding-left: 20px;
padding-right: 20px;
font-size: 14px;
&.outline-btn{
color:#1C45C2;
}
&:last-child{
margin-right: 0px;
}
}
}
&>p{
margin:0px;
font-size: 14px;
line-height: 125%;
font-weight: 500;
color:#111928;
& span{
font-weight: bold;
}
}
}
& .top{
padding-top: 15px;
& .criteria__picker{
& .btn{
display: flex;
justify-content:flex-start;
&>a{
font-size: 14px;
color:#1C45C2;
}
}
& .list{
margin-bottom: 24px;
&>.elem{
display: flex;
align-items:center;
justify-content:space-between;
margin-bottom: 15px;
&:last-child{
margin-bottom: 0px;
}
& .remove__btn{
display: inline-flex;
margin-left: 15px;
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 30px;
max-width: 30px;
min-height: 30px;
max-height: 30px;
border-radius: 4px;
transition:.3s ease all;
&:hover{
background-color:rgba(240,82,82,0.15);
}
}
}
&>.spacer{
min-height: 1px;
width: 100%;
background-color:#E5E7EB;
}
&>.group__dropdown{
min-width: 120px;
max-width: 120px;
}
&>.group__input{
&:nth-child(3){
min-width: 120px;
max-width: 120px;
}
&:nth-child(1){
min-width: 180px;
max-width: 180px;
&>input{
font-weight: bold;
}
}
}
}
}
&>p{
margin-top:0px;
margin-bottom: 12px;
font-size: 18px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
}
&>.group__input{
margin-bottom: 24px;
}
&>h6{
margin-top: 0px;
margin-bottom: 32px;
font-size: 24px;
line-height: 125%;
font-weight: 600;
color:#111928;
}
}
}
}
.type__box{
display: inline-flex;
align-items:center;
justify-content:flex-start;
min-height: 25px;
border-radius: 6px;
background-color:#EFF2F4;
padding-right: 8px;
padding-left: 8px;
&.grey{
&>p{
color:#4B5563;
}
}
&>span{
display: inline-flex;
margin-right: 4px;
& img{
min-width: 16px;
max-width: 16px;
}
}
&>p{
margin:0px;
margin-left: 4px;
font-size: 12px;
line-height: 150%;
font-weight: 500;
color:#111928;
}
}
.side__tooltip{
padding:5px 12px;
position: fixed;
z-index: 12;
pointer-events:none;
background-color:#000;
border-radius: 5px;
&:before{
content:"";
position: absolute;
top:50%;
transform:translateY(-50%);
left: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right:5px solid #000;
}
& p{
font-size: 14px;
line-height: 19px;
margin:0px;
color:#fff;
font-weight: 400;
}
}
header .outer__header .header__right .project__wrapper{
}
.side__tooltip.hidden{
display: none!important;
}
.breadcrumbs.double .edit__layout .add__report .dropdown{
overflow:hidden;
}
.group__input.float__group>span{
}
.tag__field .field{
min-height: 42px;
}
.pagination__switcher ul li a svg path{
transition:.3s ease all;
}
.new__campaign--box{
& .tag__field{
&>.dropdown{
left: 0px;
width: 100%;
}
}
}
.appointment__box .head .controls .view__switcher ul>li:last-child{
border-right: 0px;
}
.more__space .jb-emoji{
margin-left: 50px!important;
}
.tasks__wrapper .tasks__box .task__filter .right .filter__switcher ul li:last-child{
border-right:0px;
}
.form__setup>.box .top>ul>li:last-child{
border-right: 0px;
}
.modal__side.profile__side .inner__modal>.modal__box .double>.contact__info>ul>li a{
font-weight: 400!important;
}
.modal__side.profile__side .inner__modal>.modal__box .double .contact__info .contact__group>.elem .tag__field .dropdown{
left: 0px;
width: 100%;
}
header .close__btn{
& .theme{
display: inlione-flex;
align-items:center;
justify-content:center;
margin-right: 20px;
&>a{
&.active{
color:#fff;
}
font-size: 17px;
color:#000;
}
}
}
.result__wrapper .information__wrapper>.box .content>.tag__field .dropdown{
z-index: 3!important;
}
.pipeline__main .stages__list .stage__elem--list .content .element{
border-radius: 10px;
}
.modal__wrapper.new__source .modal__box .controls>a, .modal__wrapper.new__source--attribute .modal__box .controls>a, .modal__wrapper.new__event--attribute .modal__box .controls>a, .modal__wrapper.new__event .modal__box .controls>a, .modal__wrapper.member__id .modal__box .controls>a{
margin-right: 10px;
&:last-child{
margin-right: 0px;
}
}
.modal__wrapper.new__source>.inner__modal>.modal__box>.top{
padding:0px;
}
.templates__box--wrapper>.templates__switcher ul>li>a:before{
bottom:-1px;
}
.inbox .inbox__side{
transition:.6s ease all;
}
.inbox__side .collapse>a{
transition:.3s ease all;
&.opened{
transform:rotate(180deg);
}
}
.open__side--inbox{
cursor:pointer;
position: absolute;
left: 0px;
bottom:40px;
&.visible{
opacity:1;
pointer-events:initial;
}
margin-bottom: 15px;
transform:rotate(180deg);
transition:.3s ease all;
opacity:0;
pointer-events:none;
}
.create__folder{
& .modal__box .top{
padding:0px!important;
}
}
@media (max-width: 1440px){
header .outer__header .header__left{
max-width: 440px;
}
}
.expand__menu{
display: none;
}
.side__inner--menu{
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
}
&::-webkit-scrollbar-thumb {
border-radius: 250px;
background-color:rgb(28,69,194);
}
}
@media (max-width: 1280px){
.open__side--inbox{
opacity:1;
pointer-events:initial;
&.opened{
opacity:0;
pointer-events:none;
}
}
.jb-emoji{
margin-left: 145px;
}
.box__with--info.with__menu{
width: 100%;
}
.box__with--menu .side__inner--menu{
position: fixed;
left: 0px;
height: calc(100% - 53px);
top: 53px;
-webkit-transition: .4s ease all;
transition: .4s ease all;
left: -220px;
z-index: 3;
}
.expand__right{
opacity:1;
pointer-events:initial;
}
.expand__settings , .expand__configure , .expand__menu{
display: flex;
&>a{
&.opened{
transform: translateX(-50%) rotate(0deg);
}
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%) rotate(180deg);
transform: translateX(-50%) rotate(180deg);
bottom: 42px;
opacity: 1;
pointer-events: initial;
transition:.3s ease all;
}
}
body.opened .main__wrapper.inbox{
padding-left: 56px;
}
body.opened .main__wrapper.configure{
padding-left: 56px;
}
header .outer__header .header__left{
max-width: 340px;
}
body.opened header{
width: calc(100% - 56px);
left: 56px;
}
body.opened .main__wrapper{
padding-left: 80px;
}
body.opened .main__wrapper.settings{
padding-left: 56px;
}
}
@media (max-width: 991px){
.show__data{
&>.dropdown__check{
width: calc(100% - 95px);
}
}
.show__data{
max-width: 100%;
}
.show__data .dropdown__check{
max-width: 100%;
}
.show__data>p{
min-width: 80px;
}
.modal__side.lead__info .lead__info .box .grid>.elem{
margin-right: 32px;
}
.modal__wrapper.create__folder .inner__modal .modal__box{
padding:16px;
}
.modal__wrapper .inner__modal .new__tag form .color__wrap{
margin-top: 16px;
padding-top: 16px;
}
.modal__wrapper .inner__modal .new__tag .controls{
padding:16px;
}
.modal__wrapper .inner__modal .new__tag form{
padding:20px 16px;
}
.modal__wrapper .inner__modal .new__tag .title{
padding:16px;
}
.error__float{
max-width: 440px;
}
.modal__wrapper.confirm__campaign .inner__modal .modal__box .top__part{
padding:16px;
padding-bottom: 0px;
}
.modal__wrapper.confirm__campaign .inner__modal .modal__box .desc{
margin-bottom: 16px;
}
.modal__wrapper.confirm__campaign .inner__modal .modal__box .controls{
padding:16px;
}
.filter__btn .filter__dropdown{
width: 400px;
}
.events__attributes{
margin-bottom: 25px;
padding-bottom: 25px;
}
header .outer__header .header__right .project__wrapper>a>p{
display: none;
}
header .outer__header .header__right .project__wrapper>a>span{
margin-right: 0px;
}
.regular__table .campaign__table--element>.top{
flex-direction:row;
}
.regular__table .campaign__table--element>.top{
flex-direction:row;
}
.regular__table .top{
& .switcher{
margin-left: auto;
margin-top: 10px;
}
}
.regular__table .top{
flex-direction:column;
&>form{
margin-right: auto;
}
&>.btns{
margin-top: 10px;
margin-left: auto;
}
}
}
.filter__box .prev__btn{
display: none;
}
.jb-emoji .jb-emoji-search{
transition:.3s ease all;
}
.jb-emoji .jb-emoji-search:focus{
border-color:#1C45C2;
}
.emoji__picker>a svg path{
transition:.3s ease all;
}
.emoji__picker>a.active svg path{
fill:#1C45C2;
}
.emoji__picker>a:hover{
& svg path{
fill:#1C45C2;
}
}
.modal__wrapper{
& .remove__chat{
max-width: 605px;
width: 100%;
border-radius: 8px;
border:1px solid #E5E7EB;
background-color:#fff;
& .controls{
display: flex;
align-items:center;
justify-content:flex-end;
padding:16px 24px;
& .delete-btn{
display: inline-flex;
min-height: 48px;
padding-left: 20px;
padding-right: 20px;
align-items:center;
justify-content:center;
border-radius: 8px;
box-shadow:0px 4px 6px rgba(0,0,0,.1);
margin-right: 8px;
font-size: 16px;
line-height: 24px;
font-weight: 500;
color:#fff;
background-color:#E02424;
text-decoration: none;
transition:.3s ease all;
&:hover{
opacity:.7;
}
}
& .cancel-btn{
display: inline-flex;
min-height: 48px;
padding-left: 20px;
padding-right: 20px;
align-items:center;
justify-content:center;
margin-right: 8px;
font-size: 16px;
line-height: 24px;
font-weight: 500;
color:#0E1217;
text-decoration: none;
transition:.3s ease all;
&:hover{
opacity:.7;
}
}
}
& .top__area{
padding:24px;
border-bottom:1px solid #E5E7EB;
& .content{
&>p{
margin:0px;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color:#374151;
& span{
font-weight: 600;
}
}
}
}
& .top{
display: flex;
align-items:center;
margin-bottom: 16px;
justify-content:space-between;
&>p{
margin:0px;
font-size: 18px;
line-height: 140%;
font-weight: 600;
color:#0E1217;
}
&>a{
display: inline-flex;
align-items:center;
justify-content:center;
}
}
}
}
@media (max-width: 767px){
.inbox .inbox__side{
margin-left: -15px;
}
.modal__side.ongoing .regular__box .top>h6{
font-size: 21px;
margin-bottom: 15px;
}
.modal__side.ongoing .regular__box .top .field .inner__field .hours>.group__input{
max-width: 100%;
}
.modal__wrapper .modal__box>.top{
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 15px;
}
.modal__wrapper .modal__box .manage__box{
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}
.modal__wrapper .modal__box .controls{
padding:15px;
}
.modal__wrapper .remove__chat .top__area{
padding:16px;
}
.modal__wrapper .remove__chat .controls{
padding:16px;
}
.jb-emoji{
height: 200px;
max-width: 230px;
margin-left: 95px;
& .jb-emoji-grid{
grid-template-columns:repeat(6 ,1fr);
}
}
.filter__box .prev__btn{
display: inline-flex;
align-items:center;
justify-content:center;
min-width: 30px;
max-width: 30px;
min-height: 30px;
max-height: 30px;
margin-bottom: 10px;
}
.modal__side.add__filter--side>.inner__modal .modal__box .add__filter--main .top>h6{
font-size: 20px;
line-height: 25px;
}
.modal__side.add__filter--side>.inner__modal .modal__box .add__filter--main .filters__grid .filter__box.value{
padding-top: 0px;
}
.modal__side.add__filter--side>.inner__modal .modal__box .add__filter--main .filters__grid{
grid-template-columns:1fr;
}
.modal__side.add__filter--side>.inner__modal .modal__box .add__filter--main .filters__grid .filter__box{
border-right:0px;
max-width: 100%;
width: 100%;
padding:0px;
&:nth-child(2) , &:nth-child(3){
display: none;
}
}
.embed__wrapper{
margin-top: 15px;
padding-top: 15px;
}
.main__wrapper.settings{
padding-left: 44px;
}
.notification__box , .configure__wrapper>.grid>.elem{
padding:16px;
}
.main__wrapper.inbox{
padding-left: 44px;
padding-top: 52px;
padding-right: 0px;
}
.main__wrapper.inbox{
padding-left: 44px!important;
}
body.opened .main__wrapper.configure{
padding-left: 44px;
}
.main__wrapper.configure{
padding-left: 44px;
}
.pagination__switcher{
margin-left: auto;
margin-right: auto;
}
.pagination>p{
text-align: center;
width: 100%;
}
.main__wrapper.campaign{
padding-left: 44px;
}
.main__wrapper.campaign{
padding-right:0px;
}
.modal__side .inner__modal>.modal__box{
padding-left: 16px;
padding-right: 16px;
padding-bottom: 20px;
padding-top: 32px;
}
.modal__side .inner__modal>.modal__box .close__btn{
top:12px;
right: 12px;
}
.table__wrapper table tr th{
padding:10px;
}
.table__wrapper table tr td{
padding:15px 10px;
}
.table__wrapper table{
min-width: 940px;
}
header{
padding:8px 12px;
}
.main__wrapper{
padding-top: 70px;
}
header .outer__header .header__left{
position: absolute;
left: 0px;
width: 100%;
z-index: 3;
}
header .outer__header .header__right{
margin-left: auto;
}
header .outer__header .header__left{
max-width: calc(100% - 24px);
left: 12px;
}
.main__wrapper{
padding-left: 68px;
}
.main__wrapper{
padding-right: 12px;
}
.side__menu{
width: 44px;
}
.side__menu>.top>ul>li>a{
min-width: 30px;
padding-left: 7px;
padding-right: 7px;
}
.side__menu .bottom{
right:10px;
bottom:10px;
}
.side__menu{
padding-left: 5px;
padding-right: 5px;
}
header , body.opened header{
width: calc(100% - 44px);
left: 44px;
}
body.opened .main__wrapper{
padding-left: 56px;
}
body.opened .main__wrapper.settings{
padding-left: 44px;
}
.side__menu>.top>ul>li>a{
min-height: 32px;
}
.main__wrapper{
padding-left: 56px;
}
header .outer__header .header__right .spacer{
margin-left: 8px;
margin-right: 8px;
}
header .outer__header .header__right .controls>div{
margin-right: 14px;
}
header .outer__header .header__right .profile{
margin-left: 14px;
}
.pagination{
flex-direction:column;
align-items:center;
justify-content:center;
}
.pagination>p{
margin-bottom: 7px;
}
header .outer__header .header__left{
opacity:0;
pointer-events:none;
transition:.4s ease all;
}
.modal__wrapper.new__note .inner__modal>.modal__box .title>h6{
font-size: 17px;
}
.modal__wrapper.new__note .inner__modal>.modal__box{
padding:16px;
}
.modal__wrapper.member__id .inner__modal .modal__box,.modal__wrapper.new__source--attribute .inner__modal .modal__box , .modal__wrapper.new__event .inner__modal .modal__box , .modal__wrapper.new__event--attribute .inner__modal .modal__box , .modal__wrapper.new__source .modal__box{
padding:16px;
}
.modal__wrapper.new__source .modal__box .controls, .modal__wrapper.new__source--attribute .modal__box .controls, .modal__wrapper.new__event--attribute .modal__box .controls, .modal__wrapper.new__event .modal__box .controls, .modal__wrapper.member__id .modal__box .controls{
width: calc(100% + 32px);
margin-left: -16px;
padding:15px;
margin-bottom: -16px;
}
.breadcrumbs{
padding:12px 16px;
}
}
body,html{
overflow-x:hidden;
}
@media (max-width: 640px){
.box__info>.title{
flex-direction:column;
&>p{
width: 100%;
margin-bottom: 10px;
&:last-child{
margin-bottom: 0px;
}
}
&>a{
width: 100%;
}
}
.modal__wrapper.new__source--attribute .double , .modal__wrapper.new__event--attribute .double{
grid-template-columns:1fr;
grid-row-gap:16px;
}
.error__float{
max-width: 240px;
}
.error__float .inner .left{
flex-direction:column;
align-items:flex-start;
&>span{
margin-bottom: 7px;
}
}
.error__float .inner .right{
position: absolute;
top:10px;
right: 10px;
}
}
@media (max-width: 540px){
.new__criteria.modal__side .regular__box .top .criteria__picker .list>.elem{
flex-direction:column;
}
.new__criteria.modal__side .regular__box .top .criteria__picker .list>.elem>.group__input:nth-child(1) , .new__criteria.modal__side .regular__box .top .criteria__picker .list>.elem>.group__input:nth-child(3) , .new__criteria.modal__side .regular__box .top .criteria__picker .list>.elem>.group__dropdown{
min-width: 0px;
max-width: 100%;
width: 100%;
}
.new__criteria.modal__side .regular__box .top .criteria__picker .list>.elem>.spacer{
min-height: 15px;
min-width: 1px;
width: 1px;
}
.new__criteria.modal__side .regular__box .top .criteria__picker .list>.elem{
position: relative;
& .remove__btn{
position: absolute;
bottom:7px;
right:0px;
}
}
.new__criteria.modal__side .regular__box .top .criteria__picker .list>.elem>.group__dropdown{
width: calc(100% - 45px);
margin-right: auto;
}
}
@media (max-width: 480px){
.new__criteria.modal__side .regular__box .bottom{
flex-direction:column;
}
.new__criteria.modal__side .regular__box .bottom>p{
width: 100%;
margin-bottom: 6px;
}
.new__criteria.modal__side .regular__box .bottom .right{
display: grid;
width: 100%;
grid-template-columns:repeat(2 ,1fr);
grid-column-gap:8px;
&>a{
align-items:center;
justify-content:center;
}
}
.new__criteria.modal__side .regular__box .bottom .right>a{
margin-right: 0px;
}
.modal__side.ongoing .regular__box .top .field .inner__field{
flex-direction:column;
}
.modal__side.ongoing .regular__box .top .field .inner__field .date{
max-width: 100%;
margin-right: 0px;
margin-bottom: 10px;
}
.modal__wrapper .modal__box .manage__box .manage__grid{
grid-template-columns:1fr;
}
.show__data{
flex-direction:column;
&>p{
margin-bottom: 5px;
max-width: 100%;
width: 100%;
margin-right: 0px;
}
}
.show__data .dropdown__check{
width: 100%;
}
.breadcrumbs.double .edit__layout .switch{
margin-right: 15px;
}
.breadcrumbs.double{
flex-direction:column;
justify-content:space-between;
}
.breadcrumbs.double .edit__layout{
margin-top: 10px;
}
.breadcrumbs.double .edit__layout .add__report .dropdown{
min-width: 0px;
max-width: 100%;
width: 100%;
}
.breadcrumbs.double .edit__layout{
flex-direction:column;
align-items:flex-start;
& .add__report{
width:100%;
max-width: 100%;
margin-top: 10px;
&>a{
width: 100%;
}
}
}
.modal__side.lead__info .lead__info .box .grid{
flex-direction:column;
&>.elem{
margin-bottom: 10px;
margin-right: 0px;
}
}
.regular__upload .field>a{
min-width: 90px;
font-size: 13px;
}
.upload__file--wrapper .file__list .elem__file{
flex-direction:column;
}
.upload__file--wrapper .file__list .elem__file>.right .progress__box{
width: 100%;
margin-top:10px;
}
.upload__file--wrapper .file__list .elem__file>.left{
margin-right: 0px;
}
.upload__file--wrapper .file__list .elem__file>.right {
margin-top:0px;
}
.upload__file--wrapper .file__list .elem__file>.right .progress__box{
margin-top: 0px;
}
.modal__wrapper.confirm__campaign .inner__modal .modal__box .controls{
flex-direction:column;
&>a{
width: 100%;
margin-bottom: 10px;
&:last-child{
margin-bottom: 0px;
}
}
}
.filter__btn .filter__dropdown{
padding:10px;
width: 270px;
}
.custom__filter .group__custom>p{
margin-bottom: 10px;
font-size: 12px;
}
.filter__btn .filter__dropdown>ul{
margin-bottom: 14px;
}
.filter__btn .filter__dropdown>ul li>a{
font-size: 12px;
}
.opened__task--main .btns{
grid-template-columns:1fr;
grid-row-gap:12px;
}
.save-btn>a , .save-btn>button{
width: 100%;
}
.pagination .pagination__switcher ul>li>a{
min-width: 26px;
padding-left: 8px;
padding-right: 8px;
}
.pagination .pagination__switcher ul>li{
min-width: 26px;
}
.pagination{
padding:12px;
}
.pagination .pagination__switcher ul>li>a{
padding-left: 4px;
padding-right: 4px;
min-height: 26px;
font-size: 12px!important;
}
.upload__file{
flex-direction:column;
}
.upload__file>a{
width: 100%;
border-bottom-left-radius: 0px;
border-top-right-radius: 8px;
}
.upload__file>input[type="text"]{
border-left: 1px solid #D1D5DB;
border-top-right-radius: 0px;
border-bottom-left-radius: 8px;
}
.regular__table>.top .switcher ul>li>a{
padding-left: 7px;
padding-right: 7px;
min-height: 32px;
font-size: 12px;
}
.pagination__switcher ul li{
min-height: 26px;
}
header .settings__dropdown{
min-width: 230px;
}
.table__wrapper +.pagination{
padding:12px 16px!important;
}
.pagination .pagination__switcher ul>li:nth-child(1)>a{
padding-left: 0px!important;
padding-right: 0px!important;
}
.pagination .pagination__switcher ul>li:last-child>a{
padding-left: 0px!important;
padding-right: 0px!important;
}
.regular__table>.top .switcher{
width: 100%;
& ul{
width: 100%;
&>li{
width: 100%;
}
}
}
.regular__table .top>.btns{
flex-direction:column;
width: 100%;
&>a{
margin-right: 0px;
width: 100%;
margin-bottom: 10px;
align-items:center;
justify-content:center;
&:last-child{
margin-bottom: 0px;
}
}
}
.regular__table .top form{
max-width: 100%;
}
}
@media (max-width: 370px){
.filter__btn .filter__dropdown{
right: -20px;
width: 260px;
}
}