/*======== beg Fonts ========*/
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900&display=swap');
/*======== end Fonts ========*/

/*======== beg General ========*/
*{margin:0;padding:0}
::-webkit-input-placeholder{color:#B9B9B9;opacity:1}
:-moz-placeholder{color:#B9B9B9;opacity:1}
::-moz-placeholder{color:#B9B9B9;opacity:1}
:-ms-input-placeholder{color:#B9B9B9;opacity:1}
body{font-family: 'Source Sans Pro', sans-serif;font-size:18px;line-height:1.2;font-weight:400;margin:0; background-color: #eff3f6;}
body.page{margin:0}
a{-webkit-transition:.2s ease-in;-o-transition:.2s ease-in;transition:.2s ease-in;text-decoration:none}
button{-webkit-transition:.2s ease-in;-o-transition:.2s ease-in;transition:.2s ease-in;text-decoration:none}
svg path,svg rect, svg circle{-webkit-transition:.2s ease-in;-o-transition:.2s ease-in;transition:.2s ease-in}
a:hover{text-decoration:none}
a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:0}
::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:#E8E8E8}
::-webkit-scrollbar-thumb{background: #2c3031;}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/*======== end General ========*/


/*======== beg Header ========*/
.fixed-menu {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #363a3c;
    height: 100%;
    width: 250px;
    overflow-y: auto;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    z-index: 999;
}

.fixed-menu::-webkit-scrollbar{width:2px}
.fixed-menu::-webkit-scrollbar-track{background:#E8E8E8}
.fixed-menu::-webkit-scrollbar-thumb{background: #eff3f6;}

.menu-block {
    padding: 30px;
    overflow: hidden;
}

.top-logo{
	height: 80px;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	 box-shadow: 0 -1px 0 0 #e6eaee;
	 border-right: 1px solid #e5eaee;
}

.logo-link{
	display: block;
	height: 22px;
}

.menu-name{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 16px;
	margin-bottom: 18px;
}

.menu-name span{
  font-size: 12px;
  font-weight: 600;
  color: #875b5b;
  text-transform: uppercase;
}

.menu-link li{
	list-style: none;
}

.menu-link li a{
	 width: 250px;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 30px;
  margin: 0 -30px;
   font-size: 14px;
  font-weight: 600;
  color: #b7c0cd;
}

.menu-link li a span{
  height: 15px;
  width: 15px;
  display: block;
  margin-right: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.menu-link li a:hover{
  background-color: #2c3031;
}

.menu-link li a:hover > span svg path{
  fill: #fc0043;
}

.menu-link li a:hover > span svg circle{
  fill: #fc0043;
}

.menu-link li a.active{
  background-color: #2c3031;
}

.menu-link li a.active > span svg path{
  fill: #fc0043;
}

.menu-link li a.active > span svg circle{
  fill: #fc0043;
}

.menu-link{
  margin-bottom: 40px;
}

.menu-divider{
   height: 1px;
  background-color: #545454;
  width: 100%;
  margin: 0 0 40px;
}

.menu-dashboard ul li{
  list-style: none;
}

.menu-dashboard ul li a{
   width: 250px;
  height: 50px;
   padding: 0 30px;
  margin: 0 -30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #b7c0cd;
}

.menu-dashboard ul li a span{
    width: 32px;
  height: 24px;
  border-radius: 31px;
  background-image: linear-gradient(to top, #0987b0 33%, #149dc9);
  display: block;
  line-height: 24px;
  text-align: center;
}

.menu-dashboard ul li a:hover{
  background-color: #2c3031;
}

.menu-dashboard ul li a.active{
  background-color: #2c3031;
}

.menu-dashboard{
  margin-bottom: 200px;
}

.menu-progress p{
    font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}

.menu-progress p i{
  font-style: normal;
  font-weight: normal;
   color: #b7c0cd;
}

.menu-progress progress:not([value]){background: transparent;}
.menu-progress progress[value]{width:100%;height:4px;background-color: #fff;}
.menu-progress progress[value]::-webkit-progress-bar{background-color: #2c3031;}
.menu-progress progress[value]::-webkit-progress-value{background-image: linear-gradient(to right, #0987b0 2%, #149dc9 98%);}

/*======== end Header ========*/

.login {
  background-color: #353a3c;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 100vh;
}

.dark-logo-flex{
	display: flex;
	justify-content: flex-end;
}

.login > div{
	height: 100%;
	flex: 0 0 50%;
}

.dark-base {
    padding: 310px 0 0px;
    position: relative;
    height: 100%;
}

.dark-logo {
  width: 480px;
  height: 200px;
  border-radius: 4px;
  background-color: #2c3031;
  display: flex;
  justify-content: center;
  align-items: center;
}

.white-base {
    background-color: #eff3f6;
    padding: 457px 0 250px;
    position: relative;
}

.bottom-text{
	position: absolute;
	bottom: 25px;
	left: 45px;
}

.bottom-text p{
	  font-size: 14px;
  line-height: 1.36;
  color: #353a3c;
}

.bottom-menu{
	position: absolute;
	bottom: 25px;
	right: 40px;
}

.bottom-text p a{
	color: #149dc9;
}

.bottom-text p a:hover{
	color: #875b5b;
}

.bottom-menu ul li{
	display: inline-block;
	margin-right: 20px;
	position: relative;
}

.bottom-menu ul li:before{
	content: "|";
	position: absolute;
	right: -13px;
	color: rgba(255, 255, 255, 0.502);
  font-size: 14px;
  top: 3px;
}
.bottom-menu ul li:last-child{
	margin-right: 0;
}

.bottom-menu ul li:last-child:before{
	display: none;
}

.bottom-menu ul li a{
  color: rgba(255, 255, 255, 0.502);
  font-size: 14px;
  line-height: 1.36;
}

.bottom-menu ul li a:hover{
	color: #149dc9;
}

.white-base h1 {
  font-size: 26px;
  color: #353a3c;
  font-weight: normal;
  margin: 0 0 21px 40px;
}

.login-form {
  width: 480px;
  height: 200px;
  border-radius: 4px;
  box-shadow: 0 10px 20px 0 rgba(135, 91, 91, 0.2);
  background-color: #ffffff;
  padding: 30px 40px;
  margin: 0 0 20px;
}

.login-form label {
  width: 62px;
  height: 19px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.36;
  color: #7f8fa4;
  display: block;
  margin: 0 0 5px;
}

.login-form input{
	 width: 370px;
  height: 36px;
  border-radius: 4px;
  border: solid 1px #dfe3e9;
  background-color: #f8fafc;
  margin: 0 0 10px;
  padding-left: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #354052;
}


.login-form input::-webkit-input-placeholder{  color: #354052;opacity:1}
.login-form input:-moz-placeholder{  color: #354052;opacity:1}
.login-form input::-moz-placeholder{  color: #354052;opacity:1}
.login-form input:-ms-input-placeholder{  color: #354052;opacity:1}

.btn-flex{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-left: 40px;
}

.btn-flex button {
  width: 120px;
  height: 40px;
  border-radius: 4px;
  background-color: #149dc9;
    font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  border: 0;
  cursor: pointer;
  margin-right: 24px;
}

.btn-flex button:hover{
	background-color: #875b5b;
}

.btn-flex a{
  font-size: 14px;
  color: #149dc9;
}

.btn-flex a:hover{
	color: #875b5b;
}


.page-content {
    margin-left: 250px;
    position: relative;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    overflow: hidden;
}

.top-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -1px 0 0 #e6eaee;
    background-color: #ffffff;
    padding: 15px 30px;
}

.top-block h2{
    font-size: 28px;
  font-weight: normal;
  color: #353a3c;
}

.admin-img{
    width: 50px;
  height: 50px;
  border-radius: 50%;
}

.admin-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flex-admin{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.admin-info h3{
  font-size: 16px;
  font-weight: 600;
  color: #353a3c;
  margin: 0 0 2px;
}

.admin-info h6{
   font-size: 14px;
  font-weight: 600;
  color: #7f8fa4;
}

.admin-info{
  margin-left: 15px;
  padding-right: 35px;
  position: relative;
}

.admin-info:after{
  content: url(../img/arrow.svg);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.content{
  padding: 40px 50px 50px;
}

.content h2{
    font-size: 28px;
 font-weight: normal;
  color: #353a3c;
  margin: 0 0 25px;
}

.product-block {
    border-radius: 4px;
    box-shadow: 0 10px 20px 0 rgba(135, 91, 91, 0.2);
    background-color: #ffffff;
    padding: 205px 10px 50px;
}

.product-block p{
  font-size: 18px;
  font-weight: 600;
  color: #353a3c;
  margin: 0 0 110px;
  text-align: center;
}

.product-img {
    margin: 0 0 20px;
    text-align: center;
}


.product-block a{
   width: 195px;
  height: 36px;
  border-radius: 4px;
  background-color: #149dc9;
  display: flex;
  justify-content: center;
  align-items: center;
   font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.product-block a:hover {
    background-color: #875b5b;
}

.campaign-back {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 145px 0 0;
}

.campaign-back > div{
  flex-basis: 31%;
}

.campaign-block {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 10px 20px 0 rgba(135, 91, 91, 0.2);
    background-color: #ffffff;
    padding: 82px 20px 40px;
}

.campaign-img{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 118px;
  margin: 0 0 55px;
}

.campaign-block p{
    font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: #875b5b;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.campaign-block h3{
  font-size: 30px;
  text-align: center;
  color: #354052;
  font-weight: normal;
  margin: 0 0 30px;
}

.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}

.campaign-block a{
    width: 125px;
  height: 36px;
  border-radius: 4px;
  background-color: #149dc9;
   font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.campaign-block a:hover {
    background-color: #875b5b;
}

.setup-block{
  padding: 50px 50px 50px;
}

.setup-block label{
  display: block;
   font-size: 14px;
  font-weight: 600;
  color: #353a3c;
  margin: 0 0 5px;
}

.setup-block input{
  width: 100%;
  height: 36px;
  border-radius: 4px;
  border: solid 1px #dfe3e9;
  background-color: #ffffff;
  padding-left: 15px;
  font-family: 'Source Sans Pro', sans-serif;
   font-size: 14px;
  font-weight: 600;
  color: rgb(53,64,82, 0.5);
  margin: 0 0 27px;
}

.datepicker-input{
  background-image: url(../img/schedule-icon.svg);
  background-position: center right 10px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.setup-block select{
  width: 100%;
  height: 36px;
  border-radius: 4px;
  border: solid 1px #dfe3e9;
  background-color: #ffffff;
  padding-left: 15px;
  font-family: 'Source Sans Pro', sans-serif;
   font-size: 14px;
  font-weight: 600;
  color: rgb(53,64,82, 0.5);
  margin: 0 0 25px;
  background-image: url(../img/arrow.svg);
  background-position: center right 15px;
  background-repeat: no-repeat; 
  cursor: pointer;
}

.setup-block textarea{
  width: 100%;
   height: 374px;
  border-radius: 4px;
  border: solid 1px #dfe3e9;
  background-color: #ffffff;
  padding: 9px 13px;
  font-family: 'Source Sans Pro', sans-serif;
   font-size: 14px;
  font-weight: 600;
  color: rgb(53,64,82, 0.5);
  resize: none;
}

.setup-block button{
   width: 195px;
  height: 36px;
  border-radius: 4px;
  background-color: #149dc9;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.setup-block button:hover {
    background-color: #875b5b;
}

.setup-block .flex-end{
  margin: 25px 0 0;
}

.flex-end{
 display: flex;
 justify-content: flex-end;
 align-items: center;
}

.setup-block .col-lg-6{
  padding: 0 50px;
}

.setup-block .row{
  margin: 0 -50px;
}

.setup-block .row .row-date{
  margin: 0 -23px;
}

.setup-block .row-date .col-lg-6{
  padding: 0 23px;
}

.content-campaingn h2{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.content-campaingn h2 span{
  font-size: 12px;
  font-weight: 600;
}

.table-back{
  border-radius: 4px;
  box-shadow: 0 10px 20px 0 rgba(135, 91, 91, 0.2);
  background-color: #ffffff;
}

.create{
   width: 189px;
  height: 36px;
  border-radius: 4px;
  background-color: #149dc9;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.create img{
  margin-right: 12px;
}

.table-control{
  padding: 19px 26px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-control select{
  width: 155px;
  height: 36px;
  border-radius: 4px;
  border: solid 1px #ced0da;
  background-image: url(../img/arrow.svg);
  background-repeat: no-repeat;
  background-position: center right 20px;
  padding-left: 20px;
   font-size: 14px;
  font-weight: 600;
  color: #354052;
  cursor: pointer;
}

.create:hover {
    background-color: #875b5b;
}

.export{
   font-size: 14px;
  font-weight: 600;
  line-height: 1.36;
  color: #149dc9;
  margin-left: 60px;
}

.export svg{
  margin-right: 15px;
}

.export:hover {
  color: #875b5b;
}

.export:hover > svg g g g path{
  fill: #875b5b;
}

.table-back table{
  width: 100%;
  border-collapse: collapse;
}

.table-back table th{
  height: 36px;
  background-color: #eef3f6;
  font-size: 14px;
  font-weight: 600;
  color: #7f8fa4;
  border: 1px solid #eef3f6;
  text-align: left;
  padding: 0 10px;
}

.table-back table th:first-child{
  padding-left: 20px;
}

.table-back table td{
  padding: 16px 10px;
  text-align: left;
  border-bottom: 1px solid #e6eaee;
  font-size: 14px;
  font-weight: 600;
  color: #354052;
}

.table-back table td:first-child{
  padding-left: 20px;
}

.table-back table td p{
    font-size: 12px;
  color: #7f8fa4;
}

.check{
  width: 30px;
  height: 15px;
  border-radius: 50px;
  background-color:  #36af47;
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    transition: .2s ease-in;
}

.check.active{
  background-color: #a4a4a4;
}

.check:after{
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50px;
  background-color: #ffffff;
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    transition: .2s ease-in;
}

.check.active:after{
  left: 16px;
}

.content-overview{
  margin-right: 300px;
}

.overview-block{
   width: 100%;
  height: 110px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border: solid 1px #e6eaee;
  background-color: #ffffff;
  padding: 23px 10px;
  margin: 0 0 -1px;
  position: relative;
}

.info {
    position: absolute;
    top: 0px;
    right: 6px;
    height: 22px;
    cursor: pointer;
}

.overview-block h3{
  font-size: 30px;
  text-align: center;
  font-weight: normal;
  color: #354052;
  margin-bottom: 11px;
}

.overview-block p{
    font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: #875b5b;
}

.overview-block-bottom{
  width: 100%;
   height: 50px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border: solid 1px #e1e1e1;
  font-size: 12px;
  color: #354052;
  text-transform: uppercase;
}

.overview-block-bottom span{
  font-weight: 600;
  margin-right: 3px;
}

.overview-block-bottom img{
  margin-right: 8px;
}

.top-overview{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.top-overview > div{
  flex-basis: 23%;
}

.calendar-block{
  top: 80px;
  right: 2px;
  position: absolute;
  width: 300px;
  height: 100%;
  box-shadow: -1px 0 0 0 #e6eaee;
  background-color: #ffffff;
  -webkit-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    transition: .2s ease-in;
}

.calendarpic .datepicker {
    width: 300px;
    border: none;
    border-bottom: 1px solid #e6eaee;
    border-top: 1px solid #e6eaee;
    border-radius: 0;
}

.calendarpic .datepicker--nav {
    padding: 0px;
    border-bottom: 1px solid #e6eaee;
}

.datepicker--nav-action {
    width: 40px;
    height: 40px;
}

.datepicker--nav-title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #354052;
    width: 220px;
    border-right: solid 1px #e6eaee;
    border-left: solid 1px #e6eaee;
    padding: 0;
}

.datepicker--nav-title i{
  color: #354052;
}

.datepicker--day-name{
  font-family: 'Source Sans Pro', sans-serif;
    font-size: 10px;
  font-weight: 600;
  color: #adafb2;
}

.datepicker--cell{
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #354052;
  position: relative;
}

.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade-{
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #adafb2;
}

.datepicker--cell.-selected-, .datepicker--cell.-selected-.-current- {
  background: none;
}

.datepicker--cell.-selected-:before, .datepicker--cell.-selected-.-current-:before {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    background: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fc0043;
    border-radius: 50%;
    z-index: -1;
}

.datepicker--cell.-selected-.-focus-{
  background: none;
}


.summary-block{
  padding: 0 45px;
  margin: 195px 0 0;
}

.summary-block h2{
   font-size: 24px;
  font-weight: normal;
  color: #354052;
  margin-bottom: 8px;
}

.summary-block p{
    font-size: 14px;
  font-weight: 600;
  color: #7f8fa4;
  margin-bottom: 6px;
}

.summary-block h3{
   font-size: 30px;
  font-weight: normal;
  color: #354052;
}

.summary-flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-flex span{
    width: 55px;
  height: 30px;
  border-radius: 4px;
  background-color: #39b54a;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.sum-info{
  margin-left: 6px;
  cursor: pointer;
}

.sum-info img{
  height: 16px;
  width: 16px;
}


.sum-table-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 10px;
}

.sum-table-title p{
   font-size: 14px;
  font-weight: 600;
  color: #7f8fa4;
  margin: 0;
}

.sum-table-title a{
   font-size: 12px;
  font-weight: 600;
  color: #149dc9;
}

.sum-table{
  margin-bottom: 15px;
}

.sum-table-td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e6eaee;
    padding: 5px 0 8px;
}

.sum-table .sum-table-td:last-child{
  border-bottom: 0;
}

.sum-table-td span{
   font-size: 14px;
  font-weight: 600;
  color: #354052;
}

.sum-divider {
    height: 1px;
    background-color: #e6eaee;
    margin: 22px -25px 24px;
}

.icon-calendar {
    position: fixed;
    height: 30px;
    width: 30px;
    top: 85px;
    right: 5px;
    display: none;
    z-index: 9999;
    color: #ffffff;
    z-index: 999;
    -webkit-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    transition: .2s ease-in;
}