File: /home/crm/public_html/wwwroot/assets/scss/theme/_dashboard_default.scss
/**=====================
53. Dashboard CSS Start
==========================**/
// update index dashboard css start
.trasaction-sec{
&.card{
.card-body{
margin-bottom:-35px;
}
}
.transaction-totalbal{
padding-left:30px;
h2{
display: flex;
align-items: center;
font-size: 22px;
font-weight: 700;
}
}
#chart-3dash{
margin-left:-15px;
margin-right:-15px;
}
}
// Helper classes page css
.helper-classes {
padding:30px;
margin-bottom:0;
white-space:pre-line;
}
// box-shadow
.box-shadow-title {
.sub-title {
margin: 30px 0;
}
}
// list //
.list-group-item{
background-color: $light-background;
border-color: $light-gray;
&.active{
background-color:$primary-color;
&:hover{
background-color:$primary-color;
color:$white;
}
}
}
.list-group-item-action{
&:hover,&:focus{
background-color:rgba( $primary-color, 0.1);
color:$primary-color;
}
&.active{
background-color:$primary-color;
color:$white;
&:hover{
background-color:$primary-color;
color:$white;
}
}
}
// general-widget
.general-widget{
.custom-card{
.card-header{
img{
margin-top:-95px;
}
}
}
}
// background-color:$secondary-color;
.dashboard-default-sec,.dashboard-2-main{
.card{
.card-header{
i{
font-size: 14px;
}
p{
font-weight:500;
color:$light-text;
margin-bottom:unset;
font-size:12px;
}
h5{
font-size: 18px;
font-weight: 700;
}
ul.week-date{
li{
display:inline-block;
font-size:12px;
color:$light-font;
font-weight:500;
&:nth-child(n+2){
margin-left:10px;
padding-left:15px;
border-left: 1px solid $light-gray;
}
}
}
}
&.income-card{
overflow:hidden ;
.card-header {
padding-bottom:0;
}
.card-body{
.round-box{
width:55px;
height:55px;
border-radius:27px;
display:flex;
align-items:center;
justify-content:center;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
transition:all 0.5s ease;
svg{
width:auto;
height:25px;
transition: all 0.5s ease;
}
}
.knob-block {
position: relative;
input{
color: $dark-light !important;
}
canvas {
height:56%;
width:56%;
margin-bottom:12px;
}
}
.round-progress{
.progress-circle{
position:relative;
}
}
.parrten{
position:absolute;
top:-25px;
right:-25px;
svg{
fill:rgba($primary-color,0.03);
width:100px;
height:100px;
transform: rotate(-135deg);
}
}
}
&.card-primary {
.round-box{
background-color:rgba($primary-color,0.1);
svg{
fill:$primary-color;
}
}
&:hover{
.round-box{
background-color: $primary-color;
svg{
fill:$white;
}
}
}
}
&.card-secondary {
border-color: $border-secondary;
.round-box{
background-color:rgba($secondary-color,0.1);
svg{
fill:$secondary-color;
}
}
&:hover{
.round-box{
background-color: $secondary-color;
svg{
fill:$white;
}
}
}
}
.card-body{
h3{
font-weight: 700;
}
h5{
font-size: 22px;
font-weight: 700;
}
p{
font-size:12px;
color:$light-text;
font-weight:500;
text-transform:capitalize;
&:last-child{
font-weight: 700;
}
}
}
}
}
}
.center-content{
margin:auto;
padding-right:50px;
}
.dashboard-default-sec{
#chart-dashbord{
.apexcharts-legend{
&.position-right,&.position-left{
left:0 !important;
right:0;
width:fit-content;
margin-left:auto;
margin-right:52%;
}
}
}
}
.position-unset{
position:unset;
}
.profile-greeting{
border:none;
.card-header{
padding-bottom: 0 !important;
background-color: transparent;
.setting-list{
border-radius: 50%;
}
}
h3{
color:$white;
font-weight:700;
margin-bottom:10px;
}
p{
font-size: 14px;
line-height: 25px;
color: rgba($white,0.7);
font-weight: 400;
text-align: center;
font-family: $font-roboto;
padding:0 15px;
margin-bottom:15px;
}
.btn{
color: $primary-color;
font-weight: 700;
&:hover{
background-color: $white !important;
border-color:$white !important;
}
}
.card-body{
z-index:2;
}
.confetti {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
z-index:1;
}
.confetti-piece {
position: absolute;
width: 15px;
height: 15px;
top:100%;
opacity: 0;
border-radius: 10px 50px 35px 20px ;
animation: makeItRain 5s infinite ease-out;
}
.confetti-piece:nth-child(1) {
left: 7%;
transform: rotate(-40deg);
animation: makeItRain 6s infinite ease-out;
}
.confetti-piece:nth-child(2) {
left: 14%;
transform: rotate(4deg);
animation: makeItRain 7s infinite ease-out;
}
.confetti-piece:nth-child(3) {
left: 21%;
transform: rotate(-51deg);
animation: makeItRain 5s infinite ease-out;
}
.confetti-piece:nth-child(4) {
left: 28%;
transform: rotate(61deg);
animation: makeItRain 6s infinite ease-out;
}
.confetti-piece:nth-child(5) {
left: 35%;
transform: rotate(-52deg);
animation: makeItRain 5s infinite ease-out;
}
.confetti-piece:nth-child(6) {
left: 42%;
transform: rotate(38deg);
animation: makeItRain 4s infinite ease-out;
}
.confetti-piece:nth-child(7) {
left: 49%;
transform: rotate(11deg);
animation: makeItRain 8s infinite ease-out;
}
.confetti-piece:nth-child(8) {
left: 56%;
transform: rotate(49deg);
animation: makeItRain 7s infinite ease-out;
}
.confetti-piece:nth-child(9) {
left: 63%;
transform: rotate(-72deg);
animation: makeItRain 6s infinite ease-out;
}
.confetti-piece:nth-child(10) {
left: 70%;
transform: rotate(10deg);
animation: makeItRain 5s infinite ease-out;
}
.confetti-piece:nth-child(11) {
left: 77%;
transform: rotate(4deg);
animation: makeItRain 8s infinite ease-out;
}
.confetti-piece:nth-child(12) {
left: 84%;
transform: rotate(42deg);
animation: makeItRain 4s infinite ease-out;
}
.confetti-piece:nth-child(13) {
left: 91%;
transform: rotate(-72deg);
animation: makeItRain 6s infinite ease-out;
}
.confetti-piece:nth-child(odd) {
background-color: #418578;
}
.confetti-piece:nth-child(even) {
z-index: 1;
}
.confetti-piece:nth-child(4n) {
width: 5px;
height: 12px;
}
.confetti-piece:nth-child(3n) {
width: 3px;
height: 10px;
}
.confetti-piece:nth-child(4n-7) {
// background: red;
background-color: #418578;
}
@-webkit-keyframes makeItRain {
from {opacity: 0;}
50% {opacity: 1;}
to {-webkit-transform: translateY(-350px) ;}
}
}
.latest-update-sec,.recent-order-sec{
.media{
.media-body{
margin-left:20px;
}
}
table{
tbody{
h6{
font-size:14px;
font-weight:600;
}
tr{
td{
a{
font-size: 12px;
letter-spacing: 0px;
line-height: 35px;
font-weight: 500;
.btn{
font-size:12px;
}
img{
width: 30px !important;
margin-right: 1rem !important;
}
}
}
}
}
}
h3{
font-size: 24px;
line-height: 25px;
font-weight: 700;
text-align: center;
}
span{
font-size: 14px;
line-height: 18px;
font-weight: 600;
}
.btn{
font-size: 12px;
line-height: 25px;
color: $primary-color;
font-weight: 700;
text-align: center;
}
h5{
font-size:18px;
font-weight: 700;
}
h4{
font-size: 22px;
line-height: 30px;
font-weight: 700;
}
p{
font-size: 12px;
font-weight: 500;
color:#717171;
margin-bottom:0;
}
.recent-order-sec{
h5{
margin-bottom:0;
}
table{
th{
font-size: 14px;
line-height: 36px;
font-weight: 700;
}
tr{
td{
p{
font-size:13px;
line-height:18px;
color:#717171;
font-family:"Roboto";
font-weight:400;
}
}
}
}
}
.recent-order-sec{
table{
th{
font-size: 14px;
line-height: 36px;
font-weight: 700;
}
tr{
td{
p{
font-size: 13px;
line-height: 18px;
color: #717171;
font-family:$font-roboto;
font-weight:400;
}
}
}
}
}
.rate-sec{
.card{
.card-header{
padding: 10px;
.header-top{
justify-content: flex-end;
}
}
.card-body{
padding: 15px;
}
}
}
.recent-order-sec{
.card{
.card-body{
padding: 15px;
}
}
}
}
.latest-update-sec{
.media{
align-items:center;
img,svg{
width:auto;
height:20px;
}
}
.card-body{
padding-top:0;
}
table{
tbody{
tr{
transition: all 0.5s ease;
&:hover{
background-color: rgba($secondary-color,0.1);
td{
a{
color: $secondary-color;
}
.media{
svg{
fill:$secondary-color;
}
.media-body{
span{
color:$secondary-color ;
}
}
}
}
}
td{
a{
color:$theme-font-color;
}
}
}
}
}
}
.recent-order-sec{
.table {
th{
border-bottom: none;
}
td{
padding-top:15px;
padding-bottom:15px;
}
tr{
.media{
align-items:center;
}
&:hover{
background-color:rgba($primary-color,0.1);
td{
color:$primary-color;
}
p{
color:$primary-color;
}
}
}
}
}
#chart-dashbord{
.apexcharts-legend-series{
text-align: right;
.apexcharts-legend-marker{
display:none;
text-align: right;
font-family:$font-roboto;
}
}
}
#yearly-overview-chart{
max-width: 650px;
margin: 35px auto;
}
.table{
thead{
th {
// border-bottom: 2px solid $light-gray;
}
}
}
.profile-greeting{
background-image: url(../images/dashboard/bg.jpg);
background-size: cover !important;
background-repeat: no-repeat;
background-position:center center;
position: relative;
}
.chart_data_left,.chart_data_right{
.card-body{
.chart-main{
.media{
.hospital-small-chart{
align-items:center;
// margin-bottom:-25px;
background-color:rgba($primary-color,0.05);
.small-bar{
position: relative;
.flot-chart-container{
height: 74px;
width: 75px;
.chartist-tooltip {
position: absolute;
opacity: 0;
.chartist-tooltip-value {
font-size: 10px;
padding: 5px;
color: $white;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 4px;
}
&.tooltip-show {
opacity: 1;
}
}
svg{
position: absolute;
bottom: 23px;
width: 100%;
height: 95%;
}
}
.small-chart{
svg {
.ct-series-a {
.ct-point, .ct-line, .ct-bar, .ct-slice-donut {
stroke: $primary-color;
}
}
.ct-series-b {
.ct-point, .ct-line, .ct-bar, .ct-slice-donut {
stroke: rgba( $primary-color, 0.2);
}
}
}
.chartist-tooltip {
.chartist-tooltip-value {
background-color: $primary-color;
box-shadow: 1px 1.732px 8px 0px rgba( $primary-color, 0.5 );
}
}
}
.small-chart1{
.chartist-tooltip {
.chartist-tooltip-value {
background-color:$danger-color;
box-shadow: 1px 1.732px 8px 0px rgba( $danger-color, 0.5 );
}
}
svg {
.ct-series-a {
.ct-point, .ct-line, .ct-bar, .ct-slice-donut {
stroke:$danger-color;
}
}
.ct-series-b {
.ct-point, .ct-line, .ct-bar, .ct-slice-donut {
stroke: rgba( $danger-color, 0.2);
}
}
}
}
.small-chart2{
.chartist-tooltip {
.chartist-tooltip-value {
background-color: $primary-color;
box-shadow: 1px 1.732px 8px 0px rgba( $primary-color, 0.5 );
}
}
svg {
.ct-series-a {
.ct-point, .ct-line, .ct-bar, .ct-slice-donut {
stroke: $primary-color;
}
}
.ct-series-b {
.ct-point, .ct-line, .ct-bar, .ct-slice-donut {
stroke: rgba($primary-color, 0.2);
}
}
}
}
.small-chart3{
svg {
.ct-series-a {
.ct-point, .ct-line, .ct-bar, .ct-slice-donut {
stroke:$danger-color;
}
}
.ct-series-b {
.ct-point, .ct-line, .ct-bar, .ct-slice-donut {
stroke: rgba($danger-color, 0.2);
}
}
}
.chartist-tooltip {
.chartist-tooltip-value {
background-color:$danger-color;
box-shadow: 1px 1.732px 8px 0px rgba( $danger-color, 0.5 );
}
}
}
}
}
.media-body{
.right-chart-content{
margin-left:30px;
h4{
line-height:1;
color:$dark-light !important;
font-weight: 500;
}
span{
color: rgba(43,43,43,0.7);
font-weight: 500;
}
}
}
&.border-none{
border-right:none !important;
}
}
}
}
}
.activity-timeline {
.media {
align-items: center;
.activity-line {
top: 150px;
height: 57%;
position: absolute;
width: 2px;
background-color:$light-gray;
margin: 0 auto;
left: 36px;
z-index: 1;
}
@each $circle-name, $circle-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.circle-dot-#{$circle-name}{
background-color: rgba($circle-color, 0.25);
border-radius: 100%;
padding:4px;
font-size:5px;
color: $circle-color;
}
}
+ .media {
// margin-top: 40px;
margin-top: 30px;
}
.media-body {
margin-left: 20px;
// p {
// color: rgba($theme-body-font-color, 0.7);
// font-size: 11px;
// margin-top: 2px;
// }
}
}
}
.twitter-typeahead{
display: block !important;
}
span.twitter-typeahead {
.league-name {
font-size: 16px;
padding: 6px 10px 0;
}
.tt-menu {
float: left;
width: 100%;
min-width: 10rem;
margin: 0.125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: $white;
background-clip: padding-box;
border-radius: 0.25rem;
box-shadow: 0 0 20px rgba(89,102,122,0.1);
border: none;
padding: 0;
}
.tt-suggestion {
color: $dark-editor-document;
opacity: 0.6;
font-size: 13px;
padding: 6px 12px;
border-top: 1px solid $light-semi-gray;
background-color:$light-background;
cursor:pointer;
&:hover,
&:focus {
background-color:$primary-color;
color:$white ;
opacity:1 ;
}
&.active,
&:active {
color:$white;
background-color: var(--theme-deafult);
}
}
}
// draggable card
#draggableMultiple {
.ui-sortable-handle {
.card {
cursor: move;
}
}
}
//index dashboard css ends
.crm-activity {
>li {
font-weight:600;
+li {
border-top: 1px solid $light-semi-gray;
margin-top: 12px;
padding-top: 12px;
h6 {
font-size: 14px;
line-height: 1.5;
margin-bottom: 5px;
}
}
h6 {
font-size: 14px;
}
}
span {
font-size: 40px;
}
ul.dates {
h6 {
color: $theme-body-font-color;
}
li {
color: $light-text;
font-size: 12px;
display: inline-block;
line-height: 1;
+li {
border-left: 1px solid $light-semi-gray;
padding-left: 10px;
margin-left: 5px;
}
}
}
}
//general widget css start
.ecommerce-widget{
box-shadow: none;
border: 1px solid $light-gray !important;
border-radius: 5px;
h6{
color: $light-font;
}
.total-num{
color:$theme-body-font-color ;
margin:0;
letter-spacing: 1px ;
font-weight: 600 ;
font-size:24px;
span {
color: $black;
}
}
.row {
align-items: center;
}
.progress-showcase {
margin-top: 43px;
.progress{
height:20px;
}
}
span {
color: $light-text;
margin: 0;
cursor: pointer;
font-weight: 600;
}
.icon {
color: $light-semi-gray;
font-size: 40px;
}
.flot-chart-container {
height: 100px;
padding: 0;
margin: 0;
border: transparent;
}
.morris-default-style {
display: none !important;
}
svg {
-webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.3));
filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.3));
}
ul{
li{
color: $light-text;
font-weight: 600;
}
}
}
.static-top-widget {
&:hover {
.icon-bg {
transform: rotate(-5deg) scale(1.1);
transition: all 0.3s ease;
}
}
div.align-self-center {
svg {
width: 30px;
height: 30px;
}
}
.media-body {
align-self: center !important;
padding-left: 30px;
.icon-bg {
position: absolute;
right: -14px;
top: 6px;
opacity: 0.2;
transition: all 0.3s ease;
width: 100px;
height: 100px;
}
}
span{
font-weight:500;
}
h4{
font-weight:600;
}
}
.bg-danger {
.media.static-top-widget {
.align-self-center {
background-color: $danger-color;
}
}
}
.widget-joins {
&:before {
content: "";
position: absolute;
height: 100%;
width: 1px;
background-color: $light-semi-gray;
left: calc(50% - 1px);
}
&:after {
content: "";
position: absolute;
height: 1px;
width: 100%;
background-color: $light-semi-gray;
left: 0;
top: 50%;
}
.media {
padding: 30px;
text-align: center;
align-items: center;
span{
font-weight: 500;
&.widget-t{
color: $light-text;
}
}
h5{
font-weight: 600;
font-size: 18px;
}
.details{
border-left: 1px solid $light-gray;
padding: 1px 0;
}
.media-body {
text-align: left;
>span {
color: $light-text;
}
svg {
width: 40px ;
height: 40px ;
}
h5{
span{
font-weight:600;
}
}
h6 {
font-weight: 600;
span {
color: $black;
}
}
}
}
}
.redial-social-widget {
border-radius: 100%;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
margin: 0 auto;
background-image: linear-gradient(90deg, $light-color 50%, transparent 50%, transparent), linear-gradient(90deg, $light-gray 50%, $light-color 50%, $light-color);
i {
background-color: $white;
height: 80px ;
width: 80px ;
border-radius: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
&.radial-bar-70 {
background-image: linear-gradient(342deg, $primary-color 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-color 50%, rgba($primary-color,0.1) 50%, rgba($primary-color,0.1));
}
}
.social-widget-card {
span {
color: $light-text;
text-transform: uppercase;
margin-bottom: 4px;
display: inline-block;
font-size: $btn-sm-font-size;
font-weight: 600;
}
h5 {
color: $light-text;
text-transform: uppercase;
text-align: center;
padding: 20px 0;
margin-bottom: 30px;
font-size:16px;
font-weight:700;
}
h4 {
font-size:$btn-lg-font-size;
font-weight:600;
}
}
.browser-widget {
&:hover {
img {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
transition: all 0.3s ease;
transform: scale(1.1) rotate(5deg);
}
}
img {
height: 80px;
filter: grayscale(100%);
transform: scale(1) rotate(0deg);
transition: all 0.3s ease;
}
.media-body {
text-align: center;
column-count: 3;
column-rule: 1px solid $light-color;
p {
margin-bottom: 5px;
font-weight: 600;
color: $light-text;
}
span {
margin-bottom: 0;
color: $theme-body-sub-title-color;
}
h4 {
color:$theme-body-font-color;
margin-bottom:0;
font-size:$btn-lg-font-size;
font-weight:600;
span {
color: #333333;
font-weight:600;
}
}
}
}
.testimonial {
#owl-carousel-testimonial,
#owl-carousel-testimonial-rtl {
.owl-stage-outer {
.owl-stage {
.owl-item {
.item {
img {
border-radius: 100%;
}
}
}
}
}
}
i {
font-size: 60px;
color: rgba(43,43,43,0.7);
position: absolute;
left: 0;
top: 0;
opacity: 0.1;
z-index: -1;
}
p {
color: $light-text;
font-style: italic;
margin-bottom: 30px;
margin-top: 30px;
margin-top: 15px;
}
h5 {
color:$theme-body-font-color;
padding-top:10px;
margin-bottom:0;
font-weight:600;
}
span {
color:$light-text;
}
img {
margin: 0 auto;
}
}
%clock-widget {
position: absolute;
width: 24px;
height: 234px;
top: 0;
left: 102px;
margin-top: -30px;
margin-left: -25px;
}
.cal-date-widget {
.datepicker {
padding:20px;
border-radius:unset;
.datepicker--nav {
border-bottom:none;
direction:ltr;
}
.datepicker--cell-day.-other-month-,
.datepicker--cell-year.-other-decade- {
opacity: 0.5;
}
}
span{
font-weight:600;
}
p{
font-weight:500;
}
.cal-info {
display: flex;
align-items: center;
height: 100%;
h2{
font-size: 100px;
color: $primary-color;
font-weight: 700;
margin-bottom: 20px;
line-height: 0.7;
}
span{
font-size:18px;
}
p{
color: $light-text;
margin-top: 15px;
}
}
}
.datepicker--nav-action{
background-color:$primary-color;
&:hover{
background-color:$primary-color;
}
}
.datepicker--nav-title{
color:$primary-color;
i{
color:$primary-color;
}
}
.datepicker--cell.-selected-.-current-{
background-color: $primary-color;
color:$white;
}
.weather-widget-two {
position:relative;
background-color:$primary-color;
height:350px;
overflow:hidden;
p{
color: $white;
}
.card-body {
.media {
margin-bottom:10px;
}
}
svg {
path.climacon_component-stroke {
fill: $white;
}
}
.top-bg-whether {
position: absolute;
top: -50px;
right: -28px;
opacity: 0.1;
svg {
width: 200px;
height: 200px;
}
}
.num {
font-weight: 600;
}
.climacon_component-stroke {
stroke: $white;
}
.bottom-whetherinfo {
svg {
width: 150px;
height: 150px;
opacity: 0.1;
color: $white;
position: relative;
top: 0;
left: -35px;
}
.whether-content {
text-align: right;
position: relative;
top: -15px;
color: $white;
}
}
}
.mobile-clock-widget {
background:url(../images/other-images/mobile-clock-wallpaper.jpg);
background-repeat: no-repeat;
background-size:cover;
height:350px;
color:$white;
text-align:center;
display:flex;
align-items: center;
justify-content: center;
background-blend-mode: overlay;
background-color:darken($primary-color, 10%);
position: relative;
.bg-svg {
position: absolute;
top: -4px;
left: -25px;
svg {
width: 150px;
height: 150px;
opacity: 0.08;
}
}
.clock {
padding: 0;
position: relative;
list-style: none;
margin: 0 auto;
height: 175px;
width: 175px;
display: block;
background: url(../images/other-images/clock-face.png) 5% center no-repeat;
}
.sec {
@extend %clock-widget;
background: url(../images/sec.svg);
z-index: 3;
}
.min {
background: url(../images/min.svg);
z-index: 2;
}
.hour {
background: url(../images/hour.svg);
z-index: 1;
}
}
.min {
@extend %clock-widget;
}
.hour {
@extend %clock-widget;
}
//general widget css start
.mobile-clock-widget {
#date {
margin-top:30px;
font-weight:700;
}
p{
font-weight:600;
}
}
.flot-chart-container {
height: 250px;
}
.calender-widget {
.cal-img {
background: url(../images/other-images/calender-bg.png);
background-size: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 270px;
}
.cal-date {
width: 100px;
height: 100px;
margin: 0 auto;
text-align: center;
background-color: $white;
border-radius: 50%;
margin-top: -45px;
border: 1px solid $light-gray;
display: flex;
align-items: center;
justify-content: center;
h5 {
margin-bottom: 0;
line-height: 1.5;
padding: 17px;
font-weight: 700;
font-size: $btn-lg-font-size;
}
}
.cal-desc {
h6 {
font-size: 20px;
line-height: 1.5;
margin-bottom: 10px;
}
p{
color: $light-text;
font-size: 15px;
}
span {
line-height: 1.6;
}
}
}
.contact-form {
.theme-form {
border: 1px solid $light-gray;
padding: 30px;
border-radius: 4px;
.form-icon {
width:53px;
height:53px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
border: 1px solid $light-gray;
border-radius:100%;
font-size:28px;
background-color: $white;
color:$primary-color;
margin-top:-55px;
margin-bottom: 15px;
}
label {
font-weight: 600;
}
}
.btn {
padding: 10px 30px;
}
}
//chart widget css
.chart-widget-top {
#chart-widget1,
#chart-widget2,
#chart-widget3 {
margin-bottom: -14px;
.apexcharts-xaxistooltip {
display: none;
}
}
}
.bar-chart-widget {
.top-content {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.earning-details {
height: 100%;
align-items: center;
justify-content: center;
text-align: center;
display: flex;
letter-spacing: 1px;
i {
font-size: 230px;
position: absolute;
opacity: 0.1;
right: -30px;
top: 0;
&:hover {
transform: rotate(-5deg) scale(1.1);
transition: all 0.3s ease;
}
}
}
.num {
font-weight: 600;
.color-bottom {
color: $black;
}
}
}
.bottom-content {
span {
color: $theme-body-sub-title-color;
}
.block-bottom {
display: block;
}
}
.user-status {
table {
tbody {
tr {
td{
vertical-align: middle;
font-weight:500;
.d-inline-block {
margin-top: 11px;
}
.image-sm-size {
img {
width: 41px;
}
}
}
&:last-child td {
padding-bottom: 0;
}
}
}
thead {
tr {
th {
border-top: 0;
font-size: 16px;
color: $dark-color;
font-weight: 600;
padding-top: 0;
}
}
}
}
}
@keyframes am-moving-dashes {
100% {
stroke-dashoffset: -30px;
}
}
@-webkit-keyframes am-pulsating {
0% {
stroke-opacity: 1;
stroke-width: 0;
}
100% {
stroke-opacity: 0;
stroke-width: 50px;
}
}
@keyframes am-pulsating {
0% {
stroke-opacity: 1;
stroke-width: 0;
}
100% {
stroke-opacity: 0;
stroke-width: 50px;
}
}
@-webkit-keyframes am-draw {
0% {
stroke-dashoffset: 500%;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes am-draw {
0% {
stroke-dashoffset: 500%;
}
100% {
stroke-dashoffset: 0;
}
}
.serial-chart .chart-container {
width: 100%;
height: 500px;
.lastBullet {
animation: am-pulsating 1s ease-out infinite;
}
.amcharts-graph-column-front {
transition: all .3s .3s ease-out;
&:hover {
fill: var(--theme-secondary);
stroke: var(--theme-secondary);
transition: all .3s ease-out;
}
}
.amcharts-graph-g3 {
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 0;
stroke-dashoffset: 0;
animation: am-draw 40s;
}
.amcharts-graph-g2 .amcharts-graph-stroke {
stroke-dasharray: 3px 3px;
stroke-linejoin: round;
stroke-linecap: round;
animation: am-moving-dashes 1s linear infinite;
}
}
.speed-chart {
.chart-container {
width: 100%;
height: 530px;
}
.content {
margin-top: -200px;
margin-bottom: 20px;
h4 {
font-weight: 600;
padding-top: 2px;
}
}
}
.status-widget {
svg {
width: 20px;
height: 20px;
vertical-align: text-top;
}
.card {
.card-header {
h5 {
line-height: 1.38;
}
}
}
.status-chart {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
overflow: hidden;
}
}
.small-chart-widget .chart-container {
height: 311px;
padding: 0;
margin: 0;
border: none;
}
.small-chart-widget {
.card {
.card-body {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
}
}
.donut-chart-widget .chart-container {
height: 300px;
border: 0;
margin: 0;
padding: 0;
}
.status-details {
h4 {
font-weight: 600;
span {
color: inherit;
}
}
span {
color: $theme-body-sub-title-color;
}
}
.status-chart .chart-container {
height: 200px;
border: 0;
padding: 0;
margin: 0;
}
.map-chart .chart-container {
width: 100%;
height: 500px;
}
.serial-chart {
width: 100%;
}
.live-products,
.turnover,
.uses,
.monthly {
height: 300px;
}
.live-products {
.ct-series-a {
.ct-area,
.ct-point,
.ct-line,
.ct-bar,
.ct-slice-donut {
stroke: rgba(255, 255, 255, 0.77);
}
}
.ct-label {
fill: $white;
color: $white;
}
.ct-grid {
stroke: rgba(255, 255, 255, 0.7);
}
}
.turnover,
.uses,
.monthly {
.ct-series-a {
.ct-area,
.ct-point,
.ct-line,
.ct-bar,
.ct-slice-donut {
stroke: rgba(255, 255, 255, 1);
fill: transparent;
}
}
.ct-series-b {
.ct-area,
.ct-point,
.ct-line,
.ct-bar,
.ct-slice-donut {
stroke: rgba(255, 255, 255, 0.70);
fill: transparent;
}
}
.ct-series-c {
.ct-area,
.ct-point,
.ct-line,
.ct-bar,
.ct-slice-donut {
stroke: rgba(255, 255, 255, 0.40);
fill: transparent;
}
}
.ct-label {
fill: $white;
color: $white;
}
.ct-grid {
stroke: rgba(255, 255, 255, 0.7);
}
}
@each $activity-dot-name, $activity-dot-color in (primary, $primary-color),
(secondary, $secondary-color) ,
(success, $success-color),
(danger, $danger-color),
(info, $light-font),
(light, $light-gray),
(dark, $dark-color),
(warning, $warning-color) {
.activity-dot-#{$activity-dot-name}{
width:16px;
height:16px;
background-color:$light-background;
border-radius:100%;
border:3px solid $activity-dot-color;
box-shadow:-2.5px -6.67px 15px 0px rgba($activity-dot-color, 0.25);
position:relative;
z-index:2;
&:hover{
background-color:rgba($primary-color,0.5);
}
}
}
.chart-vertical-center {
#myDoughnutGraph,#myPolarGraph{
width: auto !important;
}
}
@media only screen and (max-width: 1800px){
.latest-update-sec {
table {
tbody {
tr {
td{
&:first-child{
min-width:320px;
}
}
}
}
}
}
.recent-order-sec {
.table {
td{
min-width:110px;
&:first-child{
min-width:320px;
}
}
}
}
.user-status {
table {
thead {
tr {
th{
&:nth-child(3){
min-width:150px;
}
}
}
}
tbody {
tr {
td{
&:first-child{
min-width: 300px;
}
}
}
}
}
}
}
@media screen and (min-width:1200px)and(max-width:1680px){
.dashboard-default-sec,.dashboard-2-main{
.card-header{
.header-top{
display:block !important;
.center-content{
margin-top:5px;
}
}
}
}
}
@media screen and (min-width:1200px) and (max-width:1365px){
.des-xl-25 {
max-width: 25%;
flex: 0 0 25%;
}
.des-xl-33 {
max-width: 33.33333%;
flex: 33.33333%;
}
.des-xl-50 {
max-width: 50%;
flex: 0 0 50%;
}
.des-xl-100 {
max-width: 100%;
flex: 0 0 100%;
}
.dashboard-default-sec{
.card{
.card-header,.card-body,.card-footer{
padding:20px;
}
.card-header{
h5{
font-size:16px;
}
p{
font-size:10px;
}
i{
font-size:12px;
}
}
&.income-card {
.card-body {
.round-box{
width:45px;
height:45px;
svg{
height:16px;
}
}
h5{
font-size:18px;
}
}
}
}
.setting-list{
top:15px;
right:15px;
.setting-option{
width:25px;
height:25px;
li{
&:first-child{
i.icon-angle-double-right{
font-size:12px;
}
}
}
}
.setting-primary, .setting-secondary, .setting-white{
width:25px;
height:25px;
}
}
.profile-greeting {
h3{
font-size:22px;
}
p{
line-height:20px;
}
.card-header {
padding-bottom:5px !important;
}
}
}
#chart-dashbord {
.apexcharts-legend{
&.position-right,&.position-left{
display: none !important;
}
}
}
.trasaction-sec {
.transaction-totalbal{
padding-left:20px;
h2{
font-size:18px;
}
}
}
}
@media only screen and (max-width: 1470px){
.bar-chart-widget{
.num{
font-size:20px;
}
}
}
@media only screen and (max-width: 1199px){
.apexcharts-legend{
&.position-right{
left: 20px !important;
}
}
.dashboard-default-sec {
.card {
.card-header,.card-body,.card-footer{
padding:20px;
}
}
}
.profile-greeting{
h3{
font-size:22px;
margin-top:5px;
}
}
}
/**=====================
53. Dashboard CSS Ends
==========================**/