$body_text_color: #6c757d;
// Dashboard
.toplevel_page_pixfort-dashboard .toplevel_page_pixfort-dashboard {
    background: linear-gradient(to right, #5c96f6, #c757be, #ea4157) !important;
    background-size: contain !important;
    font-weight: bold !important
}
.toplevel_page_pixfort-dashboard {
        .notice {
            &:not(.pixfort-notice){
                display: none;
            }

        }
}
.page-title {
    font-size: 30px;
    line-height: 32px;
    font-weight: bold !important;
    margin-bottom: 40px;
}
.pix-dashboard-divider {
    position: fixed;
    width: 100%;
    // transform: rotate(180deg) translate(0px, 1px);
    height: 70%;
    bottom: 0;
    left: 0;
    z-index: -1;

    // margin-left: -20px;
    // padding-right: 20px;
    // padding-left: 20px;
    .layer-2 {
        animation-name: fadeInUpDash;
        animation-duration: 0.5s;
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-fill-mode: both;
        animation-delay: 1.2s;
    }
    .layer-3 {
        animation-name: fadeInUpDash;
        animation-duration: 0.5s;
        animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
        animation-fill-mode: both;
        animation-delay: 1.4s;
    }
}
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 30px;
    row-gap: 30px;
    z-index: 2;

    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
    -webkit-text-size-adjust: 100%;
    &.animate-dashboard {
        .pix-dashboard-box {
            // grid-column: 2 / 3;
            // grid-column-start: 1;
            animation-name: fadeInUpDash;
            animation-duration: 0.5s;
            animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
            animation-fill-mode: both;
            animation-delay: 0.5s;
        }
        .pixfort-finish.pix-btn {
            display: none;
        }
    }
}

.pix-dashboard-box {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px 20px;
    display: inline-block;
    width: 100%;
    box-shadow: 0 .125rem .375rem rgba(#000, .05), 0 .5rem 1.2rem rgba(#000, .1);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    display: flex;
  align-items: center;
  // justify-content: center;
  > div {
      width: 100%;
  }

    .box-title {
        font-weight: bold;
        font-size: 18px;
        line-height: 20px;
        margin: 0px;
        color: #ccc;
        display: none;
    }
    .box-subtitle {
        font-weight: bold;
        font-size: 26px;
        line-height: 34px;
        margin: 0px;
        padding-bottom: 20px;
    }
    img {
        max-width: 100%;
        margin-bottom: 20px;
    }
    // .pix-plugins-img {
    //     max-width: 80%;
    // }
    .box-text {
        font-size: 16px;
        line-height: 22px;
        color: $body_text_color;
    }

    .pix-title {
        margin: 0;
    }
}
.text-center {
    text-align: center;
}
.pix-server-status {
    h3 {
        padding-bottom: 10px;
    }
    // width: 33.33%;
}
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}
@keyframes fadeInUpDash {
	0% {
		opacity: 0;
		transform: translateY(30px) scale(0.92);
	}
	80% { opacity: 1; }
	100% { transform: translateY(0) scale(1); }
}



.getting-started {
    margin-top: 60px;
    .pix-dashboard-box {
        // grid-column: 2 / 3;
        grid-column-start: 2;
        // grid-column-start: 1;
        animation-name: fadeInUpDash;
        animation-duration: 0.5s;
		animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
		animation-fill-mode: both;
        animation-delay: 0.5s;

        &.finished {
            opacity: 0;
        }
        // grid-row: 1;
        &:not(.is-active) {
            display: none;
        }
        .pixfort-skip {
            display: inline-block;
        }
        .box-title {
            display: inline-block;
        }
    }
}


.pix-btn {
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 4px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-decoration: none;
    font-size: 16px;
    display: inline-block;
    outline: none !important;
    box-shadow: 0px !important;
    border: none !important;
    cursor: pointer;
    &:focus, &:active {
        outline: none;
        box-shadow: none;
    }
    &:hover {
        opacity: 0.9;
    }
    &.btn-primary {
        background: #1274E7;
        color: #fff;
    }
    &.btn-link {
        color: #aaa;
    }
    &.pixfort-skip {
        display: none;
    }
}

.pix-video-bg-element {
    max-width: 100%;
    height: auto;
    outline: none;
}
.dash-video::-webkit-media-controls-start-playback-button, .dash-video::-webkit-media-controls {
    display: none !important;
    pointer-events: none;
     -webkit-appearance: none;
}
.dash-done-icon {
    text-align: center;
    padding: 20px 0;
    .dashboard-done {
        height: 100px;
        width: 100px;
    }
}


.pix-theme-deactivate {
    text-decoration: none;
    font-weight: bold;
    color: #adb5bd;
    background: rgba(#000,0.03);
    padding: 4px 8px;
    border-radius: 5px;
    &:hover, &:active, &:focus {
        color: darken(#adb5bd, 10%);
        background: rgba(#000,0.05);
        outline: none !important;
        box-shadow: none !important;
    }
}

.pix-dash-status-item {
    color: $body_text_color;
    font-size: 15px;
    padding: 6px 6px;
    display: flex;
  align-items: center;
  // justify-content: center;
  border-radius: 5px;
  .item-text {
      flex: 1;
  }
  img {
      margin: 0;
      width: 20px;
      height: 20px;
  }
  .help-btn {
      padding-right: 5px;
      display: flex;
      margin: 0;
      opacity: 0.3;
  }
  &:hover {
      background: rgba(#000, 0.03);
      color: darken($body_text_color, 10%);
      .help-btn {
          opacity: 1;
      }
  }
}

.pix-useful-items {
    --gap: 2px;
  display: inline-flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
  width: calc(100% + var(--gap));
  align-items: stretch;
    .useful-item {
        margin: var(--gap) 0 0 var(--gap);
        flex: 1;
        padding: 5px;
        text-decoration: none;
        display: flex;

        align-items: stretch;

        .useful-item-inner {
            padding: 20px 10px;
            border-radius: 10px;
            background: rgba(#000,0.02);
            width: 100%;
        }
        .useful-title {
            font-weight: bold;
            font-size: 18px;
            color: #333;
            margin-bottom: 4px;
        }
        .useful-text {
            color: #adb5bd;
        }
        &:hover, &:focus {
            .useful-item-inner {
                background: rgba(#000,0.04);
            }
            outline: none;
            box-shadow: none;
        }
    }
    .social-links a {
        text-decoration: none;
        font-weight: bold;
        // color: rgba(#000, 0.3);
        color: #adb5bd;
    }
}
.useful-note {
    margin-top: 20px;
    color: #adb5bd;
    img {
        margin-bottom: 5px;
        width: 100%;
        max-width: 100% !important;
    }
}

// Admin menu
#menu-posts-pixheader,
#menu-posts-pixfooter,
#menu-posts-pixpopup {
    background: rgba(#fff,0.1);
}

.pix-plugin-item {
    margin: 15px 0;
    .pix-plugin-check {
        position: relative;
        top: 2px;
    }
}
.plugin-name {
    font-weight: bold;
    font-size: 14px;
}
.plugin-install-status {
    background: rgba(#000,0.03);
    padding: 5px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 12px;
    color: rgba(#000, 0.5);
    &.pix-install-finished {
        background: #4ed199;
        color: #fff;
    }
}
.pix-plugin-install-title-sm {
    font-weight: bold;
}




// Animated SVG
.svg-box {
    display:inline-block;
    position: relative;
    width:150px;
}

.green-stroke {
    stroke:#4ed199;
}

.red-stroke {
    stroke: #FF6245;
}

.yellow-stroke {
    stroke: #FFC107;
}


.circular circle.path {
    stroke-dasharray: 330;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    opacity: 0;
    // animation: 0.7s draw-circle ease-out;
}

/*------- Checkmark ---------*/
.svg-checkmark{
	stroke-width: 6.25;
    stroke-linecap: round;
	position:absolute;
    top: 56px;
    left: 49px;
    width: 52px;
    height: 40px;
}

.svg-checkmark path {
    opacity: 0;
}
.pix-start-animation {
    circle.path {
        animation: 0.7s draw-circle ease-out forwards;
    }
    .svg-checkmark path {
        animation: 0.7s draw-check ease-out forwards;
    }
}
@keyframes draw-circle {
    0% {
        stroke-dasharray: 0,330;
        stroke-dashoffset: 0;
        opacity: 0;
    }

    80% {
        stroke-dasharray: 330,330;
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100%{
        opacity: 1;
    }
}

@keyframes draw-check {
    0% {
        stroke-dasharray: 49,80;
        stroke-dashoffset: 48;
        opacity: 0;
    }

    50% {
        stroke-dasharray: 49,80;
        stroke-dashoffset: 48;
        opacity: 1;
    }

    100% {
        stroke-dasharray: 130,80;
        stroke-dashoffset: 48;
        opacity: 1;
    }
}

/*---------- Cross ----------*/

.cross {
    stroke-width:6.25;
    stroke-linecap: round;
    position: absolute;
    top: 54px;
    left: 54px;
    width: 40px;
    height: 40px;
}

.cross .first-line {
    animation: 0.7s draw-first-line ease-out;
}

.cross .second-line {
    animation: 0.7s draw-second-line ease-out;
}

@keyframes draw-first-line {
    0% {
        stroke-dasharray: 0,56;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 0,56;
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 56,330;
        stroke-dashoffset: 0;
    }
}

@keyframes draw-second-line {
    0% {
        stroke-dasharray: 0,55;
        stroke-dashoffset: 1;
    }

    50% {
        stroke-dasharray: 0,55;
        stroke-dashoffset: 1;
    }

    100% {
        stroke-dasharray: 55,0;
        stroke-dashoffset: 70;
    }
}

.alert-sign {
    stroke-width:6.25;
    stroke-linecap: round;
    position: absolute;
    top: 40px;
    left: 68px;
    width: 15px;
    height: 70px;
    animation: 0.5s alert-sign-bounce cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.alert-sign .dot {
    stroke:none;
    fill: #FFC107;
}

@keyframes alert-sign-bounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}
.pix-showcase {
    padding: 0;
    overflow: hidden;
    a {
        width: 100%;
        display: inline-block;
        &:active, &:hover, &:focus {
            outline: none !important;
            border: 0px !important;
        }
    }
    img {
        width: 100%;
        margin-bottom: -4px !important;
    }
}



.pix-dashboard-alert {
    background: #fff3cd;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: .3rem;
    font-size: 14px;
    margin-top: 40px;
    color: #856404;
    a {
        font-weight: bold;
        text-decoration: none;
        color: #f93;
    }
}