/**widgets*/
.widgets {
font-size: 35px;
padding: 20px;
}
.widgetstext {
top: 0;
bottom: 0;
padding: 20px 40px;
}
.widget-line h4 {
font-size: 24px;
font-weight: 600;
}
.fs {
font-size: 25px;
}
.widget-line p {
font-size: 16px;
}
.widget-line-list li {
display: inline-block;
font-size: 16px;
line-height: 27px;
padding: 5px 20px 0 15px;
list-style-type: none;
}
/*----Profile----*/
.media {
display: flex;
align-items: flex-start;
}
.mediaicon {
font-size: 18px;
border: 1px solid $primary;
background: $primary;
color: $white;
width: 40px;
height: 40px;
text-align: center;
padding: 5px 0px;
border-radius: 20px;
}
.media-body {
flex: 1;
}
.mediafont {
font-size: 16px;
font-weight: 600;
}
/*-----Icon input-----*/
.defaultheader {
.input-icon-addon, .form-control.header-search::placeholder {
color: $white !important;
}
}
.input-icon {
position: relative;
.form-control {
&:not(:last-child), &:not(:first-child) {
padding-left: 2.5rem;
}
}
}
.input-icon-addon {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
min-width: 2.5rem;
pointer-events: none;
&:last-child {
left: auto;
}
}
.form-fieldset {
background: #f8f9fa;
border: 1px solid #e9ecef;
padding: 1rem;
border-radius: 3px;
margin-bottom: 1rem;
}
.form-required {
color: #dc0441;
&:before {
content: ' ';
}
}
.state-valid {
padding-right: 2rem;
background: url("data:image/svg+xml;charset=utf8,") no-repeat center right 0.5rem / 1rem;
}
.state-invalid {
padding-right: 2rem;
background: url("data:image/svg+xml;charset=utf8,") no-repeat center right 0.5rem / 1rem;
}
.form-help {
display: inline-block;
width: 1rem;
height: 1rem;
text-align: center;
line-height: 1rem;
color: #9aa0ac;
background: #f8f9fa;
border-radius: 50%;
font-size: 0.75rem;
transition: .3s background-color, .3s color;
text-decoration: none;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
&:hover, &[aria-describedby] {
background: #467fcf;
color: $white;
}
}
.sparkline {
display: inline-block;
height: 2rem;
}
.social-links li a {
background: #f8f8f8;
border-radius: 50%;
color: #9aa0ac;
display: inline-block;
height: 1.75rem;
width: 1.75rem;
line-height: 1.75rem;
text-align: center;
}
.vmap-width {
height: 240px;
width: 100%;
}
.map, .chart {
position: relative;
padding-top: 56.25%;
}
.map-square, .chart-square {
padding-top: 100%;
}
.map-content, .chart-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.map-header {
margin-bottom: 1.5rem;
height: 15rem;
position: relative;
margin-bottom: -1.5rem;
&:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 10rem;
background: linear-gradient(to bottom, rgba(245, 247, 251, 0) 5%, #f4f5fb 95%);
pointer-events: none;
}
}
.map-header-layer {
height: 100%;
}
.map-static {
height: 120px;
width: 100%;
max-width: 640px;
background-position: center center;
background-size: 640px 120px;
}
@-webkit-keyframes status-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .32;
}
}
@keyframes status-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .32;
}
}
.status-icon {
content: '';
width: 0.5rem;
height: 0.5rem;
display: inline-block;
background: currentColor;
border-radius: 50%;
-webkit-transform: translateY(-1px);
transform: translateY(-1px);
margin-right: .375rem;
vertical-align: middle;
}
.status-animated {
-webkit-animation: 1s status-pulse infinite ease;
animation: 1s status-pulse infinite ease;
}
.chart-circle {
display: block;
height: 8rem;
width: 8rem;
position: relative;
margin: 0 auto;
canvas {
margin: 0 auto;
display: block;
max-width: 100%;
max-height: 100%;
}
}
.chart-circle-xs {
height: 2.5rem;
width: 2.5rem;
font-size: .8rem;
}
.chart-circle-sm {
height: 4rem;
width: 4rem;
font-size: .8rem;
}
.chart-circle-md {
height: 6rem;
width: 6rem;
font-size: .8rem;
}
.chart-circle-lg {
height: 10rem;
width: 10rem;
font-size: .8rem;
}
.chart-circle-value {
position: absolute;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
bottom: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: column;
flex-direction: column;
line-height: 1;
small {
display: block;
color: #9aa0ac;
font-size: 0.9375rem;
}
}
.chips {
margin: 0 0 -.5rem;
}
.team i {
margin-left: 10px;
float: right;
}
.chips .chip {
margin: 0 .5rem .5rem 0;
}
.chip {
display: inline-block;
height: 2rem;
line-height: 2rem;
font-size: 0.875rem;
font-weight: 500;
color: #6e7687;
padding: 0 .75rem;
border-radius: 1rem;
background-color: #e8ebf9;
transition: .3s background;
.avatar {
float: left;
margin: 0 .5rem 0 -.75rem;
height: 2rem;
width: 2rem;
border-radius: 50%;
}
}
a.chip:hover {
color: $white;
text-decoration: none;
background-color: $primary;
}
.emp-tab table {
margin-bottom: 0;
border: 0;
}
.stamp {
color: $white;
background: #868e96;
display: inline-block;
min-width: 2rem;
height: 2rem;
padding: 0 .25rem;
line-height: 2rem;
text-align: center;
border-radius: 3px;
font-weight: 600;
}
.stamp-md {
min-width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
}
.stamp-lg {
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.chat {
outline: 0;
margin: 0;
padding: 0;
list-style-type: none;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: end;
justify-content: flex-end;
min-height: 100%;
}
.chat-line {
padding: 0;
text-align: right;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
+.chat-line {
padding-top: 1rem;
}
}
.chat-message {
position: relative;
display: inline-block;
background-color: #467fcf;
color: $white;
font-size: 0.875rem;
padding: .375rem .5rem;
border-radius: 3px;
white-space: normal;
text-align: left;
margin: 0 .5rem 0 2.5rem;
line-height: 1.4;
> :last-child {
margin-bottom: 0 !important;
}
&:after {
content: "";
position: absolute;
right: -5px;
top: 7px;
border-bottom: 6px solid transparent;
border-left: 6px solid #467fcf;
border-top: 6px solid transparent;
}
img {
max-width: 100%;
}
p {
margin-bottom: 1em;
}
}
.chat-line-friend {
-ms-flex-direction: row;
flex-direction: row;
+.chat-line-friend {
margin-top: -.5rem;
.chat-author {
visibility: hidden;
}
.chat-message:after {
display: none;
}
}
.chat-message {
background-color: #f3f3f3;
color: #495057;
margin-left: .5rem;
margin-right: 2.5rem;
&:after {
right: auto;
left: -5px;
border-left-width: 0;
border-right: 5px solid #f3f3f3;
}
}
}
.example {
padding: 1.5rem;
border: 1px solid #eff0f6;
border-radius: 3px 3px 0 0;
font-size: 0.9375rem;
}
.example-bg {
background: #f4f5fb;
}
.example+.highlight {
border-top: none;
margin-top: 0;
border-radius: 0 0 3px 3px;
}
.highlight {
margin: 0rem 0 2rem;
border: 1px solid #d3dfea;
border-radius: 3px;
font-size: 0.9375rem;
max-height: 40rem;
background: #fcfcfc;
pre {
margin-bottom: 0;
background-color: #e5e7f6;
}
}
.example-column {
margin: 0 auto;
>.card:last-of-type {
margin-bottom: 0;
}
}
.example-column-1 {
max-width: 20rem;
}
.example-column-2 {
max-width: 40rem;
}
/***** time-line*****/
.timeline__item:after {
background: $white !important;
}
.timeline--horizontal .timeline-divider {
background: #f4f5fb !important;
}
.timeline__content {
background-color: $white;
border-radius: 10px;
display: block;
padding: 1.25rem;
position: relative;
}
/*-----Back to Top-----*/
#back-to-top {
background: $primary;
color: $white;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
display: none;
text-align: center;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
z-index: 1000;
height: 50px;
width: 50px;
line-height: 50px;
background-repeat: no-repeat;
background-position: center;
transition: background-color 0.1s linear;
-moz-transition: background-color 0.1s linear;
-webkit-transition: background-color 0.1s linear;
-o-transition: background-color 0.1s linear;
i {
padding-top: 15px;
font-size: 18px;
}
&:hover {
background: $white;
color: $primary;
border: 2px solid $primary;
}
}
.tabs-menu ul li {
a {
padding: 10px 20px 11px 20px;
display: block;
}
.active {
background: $primary;
color: $white !important;
border-radius: 25px;
}
}
.tabs-menu1 ul li {
a {
padding: 10px 20px 11px 20px;
display: block;
font-weight: 500;
}
.active {
border-bottom: 3px solid $primary;
}
}
.tabs-menu-body {
padding: 15px;
border: 1px solid #eff0f6;
border-radius: 0 8px 8px 8px;
p:last-child {
margin-bottom: 0;
}
}
.tab-menu-heading {
padding: 20px;
border: 1px solid #eff0f6;
border-bottom: 0;
border-radius: 5px 5px 0 0;
}
.tab_wrapper .content_wrapper .tab_content.active p:last-child {
margin-bottom: 0;
}
.item-card {
.cardbody {
position: relative;
padding: 30px 15px;
border-radius: 0 0 .2rem .2rem;
}
.cardtitle {
span {
display: block;
font-size: .75rem;
}
a {
color: #8e9cad;
font-weight: 500;
text-decoration: none;
}
}
.cardprice {
position: absolute;
top: 20px;
right: 0;
span {
&.type--strikethrough {
opacity: 0.5;
text-decoration: line-through;
font-size: 14px;
font-weight: 400;
}
display: block;
font-size: 18px;
font-weight: 500;
}
}
}
.features {
overflow: hidden;
h2 {
font-weight: 600;
margin-bottom: 12px;
text-align: center;
font-size: 2.2em;
}
h3 {
font-size: 20px;
font-weight: 600;
}
span {
color: #43414e;
display: block;
font-weight: 400;
text-align: center;
}
}
.col-sm-2 .feature {
padding: 0;
border: 0px;
box-shadow: none;
}
.feature {
.feature-svg {
width: 25%;
}
.feature-svg3 {
width: 12%;
}
.border {
position: relative;
display: inline-block;
width: 3em;
height: 3em;
line-height: 2em;
vertical-align: middle;
padding-top: 8px;
border-radius: 50%;
color: $white;
}
p {
margin-bottom: 0;
}
}
.sub-panel-heading .tabs-menu ul li {
a.active {
background: $white;
border-radius: 0;
width: 100%;
color: $primary !important;
}
display: block;
width: 100%;
border-bottom: 1px solid #efefef;
&:last-child {
border-bottom: 0;
}
a {
padding: 15px 20px;
}
}
.invoicelist, .invoicedetailspage {
max-height: 600px;
height: 600px;
overflow: auto;
}
@media (min-width:992px) {
.invoicedetailspage.tabs-menu-body {
border-radius: 0 8px 8px 0;
}
}
@media (min-width:1800px) {
.vmap-width {
height: 300px;
}
.countryscroll {
height: 350px;
}
.horizontalMenucontainer .vmap-width {
height: 240px;
}
.horizontalMenucontainer .countryscroll {
height: 290px;
}
}