/* MAIN LOGO - font-weight: 900 (Solid), 400 (Regular or Brands), 300 (Light) */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue;

}

.mss-logo {
    position: relative;
    letter-spacing: 3px;
    font-weight: 900;
}

.minty-banner-tagline {
    display: none;
    < !--[if IE] > display: inline-block< ![endif]-->
}

.mss-tag-line {
    font-variant-caps: all-small-caps;
    text-shadow: .5px .5px .5px rgba(0, 0, 0, 1);
}

.mss-tag-line-2 {
    text-shadow: .5px .5px .5px rgba(0, 0, 0, 1);
}

.minty-mss-text {
    color: rgba(173, 255, 47, 1);
}

/* -- create the minty tool tips -- */
.minty-tip {
    border-bottom: solid 2px #eeeeee;
    border-radius: 30px;
    position: relative;
    text-align: center;
    padding: 1rem;
    width: 80%;
    color: #4696e5;
    background-color: rgba(173, 255, 47, 0.1);
    box-shadow: inset 0 0 0 2px #4696e5;
}

/* -- End create the minty tool tips -- */

/* PNotify Message Styling */
.minty-msg {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.minty-msg-notice .ui-pnotify-title {
    color: white;
    text-shadow: 0px 0px 1px white, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.minty-msg-info .ui-pnotify-title {
    color: white;
    text-shadow: 0px 0px 1px white, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.minty-msg-warn .ui-pnotify-title {
    color: white;
    text-shadow: 0px 0px 1px white, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.minty-msg-critical .ui-pnotify-title {
    color: white;
    text-shadow: 0px 0px 1px white, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.minty-msg-fatal .ui-pnotify-title {
    color: yellow;
    text-shadow: 0px 0px 1px white, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.minty-msg-fatal:before {
    content: "\f071";
    font-family: "Font Awesome 5 Pro";
    font-size: 5em;
    font-weight: 900;
    opacity: .5;
    color: yellow;
    z-index: 2;
    position: absolute !important;
    right: 50px;
}


/* PNotify Message Styling */


/* Minty Notifications */
.minty-notification {
    display: flex;
    justify-content: center;
    align-items: center;
}

.minty-notifications li {
    display: inline-block;
    width: 100px;
    height: 50px;
}

.minty-notifications li:hover {
    text-shadow: 0px 0px 50px greenyellow, 5px 5px 50px #4696e5, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    color: #4696e5 !important;
}

.minty-notification-icons {
    position: relative;
    font-size: 1.5em;
    display: inline-block;
    width: 100%;
    height: 0;
}

.minty-notification-icons a:hover {
    text-shadow: 0px 0px 50px greenyellow, 5px 5px 50px #4696e5, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    cursor: pointer;
}

#minty-notice:hover {
    color: #66BB6A;
    text-shadow: 0px 0px 50px #76ff03, 5px 5px 50px #32cb00, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    cursor: pointer;
}

#minty-info:hover {
    color: rgb(70, 150, 229);
    text-shadow: 0px 0px 50px #0d47a1, 5px 5px 50px #4285f4, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black !important;
    cursor: pointer;
}

#minty-warn:hover {
    color: #FFEE58;
    text-shadow: 0px 0px 50px #c7cc00, 5px 5px 50px #ffff00, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black !important;
    cursor: pointer;
}

#minty-critical:hover {
    color: #EF5350;
    text-shadow: 0px 0px 50px #ff3d00, 5px 5px 50px #c30000, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black !important;
    cursor: pointer;
}

#minty-fatal:hover {
    color: yellow;
    text-shadow: 0px 0px 50px red, 5px 5px 50px red, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black !important;
    cursor: pointer;
}

/* Align icons for mobile views */
@media screen and (max-width: 980px) {
    .minty-notification-icons > i {
        text-align: center;
        display: inline;
        border: 1px dashed red !important;
    }
}

@media screen and (max-width: 736px) {
    ul.icons.labeled.minty-notification-icons i {
        text-align: center;
        border: 1px dashed blue !important;
    }
}


@media screen and (max-width: 736px) and (orientation: landscape) {

    ul.icons.labeled.minty-notification-icons i {
        text-align: center;
        display: inline;
        border: 1px dashed green !important;
    }
}

@media screen and (max-width: 736px) and (orientation: portrait) {

    ul.icons.labeled {
        text-align: center;
        display: inline;
    }

    ul.icons.labeled.minty-notification-icons i {
        border: 1px dashed yellow !important;
        color: red;
    }

}

.notice-icons {
    list-style: none;
    vertical-align: middle;
    font-size: 1.5em;
    margin: 2px;
}

ul.notice-icons > li * {
    font-size: 1em;
    margin: 5px;
}

.ui-pnotify-icon {
    padding: 0 15px 0 5px;
}

.ui-pnotify-title {
    text-shadow: 0px 0px 1px white, 1px 1px 20px white;
}

.ui-pnotify-text {}

/* End Minty Notifications */


/* Project Links Sections */

.minty-projects {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#hwinfo-icon {
    background: url("/assets/img/hwinfo_flat.png");
    background-repeat: no-repeat;
    background-size: contain;
    height: 40px;
    width: 40px;
    max-height: 65px;
    max-width: 65px;
    min-height: 35px;
    min-width: 35px;
    filter: grayscale(1) opacity(.2);
    display: inline-block;
}

#hwinfo-icon:hover {
    background-color: transparent;
    filter: none;
    box-shadow: 0px 0px 50px greenyellow;
    border-radius: 5px;
}

.minty-projects li {
    display: inline-block;
    width: 100px;
    height: 50px;
}

.minty-projects li:hover {
    text-shadow: 0px 0px 50px greenyellow, 5px 5px 50px #4696e5, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    color: #4696e5 !important;
}

.minty-projects li a {
    text-decoration: none;
    width: 50%;
}

.minty-projects li a span {
    padding-top: 10px;
    font-size: 10px;
    width: 50px;
    text-transform: capitalize;
}

/* keep project icons vertical on mobile */
@media screen and (max-width: 736px) and (orientation: portrait) {
    .minty-projects li {
        display: inline-block;
        width: 60px;
        height: 50px;
    }
}

/* End Project links secitons */

/* Contact Dialog */
#contactDialog {
    border-radius: 0.6rem;
    left: 50%;
    transform: translate(-50%, -0%);
    box-shadow: 0 0 2em rgba(0, 0, 0, 1);
}

.contact-dialog-title {
    padding: 5px;
    margin: 10px;
}

dialog {
    display: none;
    padding: 5px;
    box-shadow: inset 0 0 0 2px #e6e6e6;
    border-radius: 10px;
    border-color: rgba(0, 0, 0, 0.5);
}

dialog[open] {
    display: inline-block;
}

dialog div {
    padding: 5px;
}

/* End Contact Dialog */

/* Gradient Placeholders */
.minty-gradient {
    text-align: center !important;
    vertical-align: middle !important;
    display: none;
    width: 200px !important;
    height: 150px !important;
}

.minty-font-logo {
    color: white;
    font-size: 7em !important;
    display: inline-block !important;
}


@media screen and (max-width: 736px) and (orientation: portrait) {
    .minty-font-logo {
        font-size: 9em !important;
    }
}

.minty-gradient:hover {
    text-shadow: 0px 0px 100px white,
        15px 15px 50px #4696e5, -3px 0 rgba(173, 255, 47, 0.5), 0 3px rgba(173, 255, 47, 0.5), 3px 0 rgba(173, 255, 47, 0.5), 0 -3px rgba(173, 255, 47, 0.5);
}

.minty-gradient i:hover {
    //   color: rgba(255, 255, 255, .5) !important;
}

#minty-gradient-views {
    /*background: linear-gradient(45deg, rgb(70, 150, 229), transparent),
        repeating-linear-gradient(45deg, rgb(173, 255, 47) 0%, rgb(70, 150, 229) 5%, transparent 5%, transparent 10%);*/
    background: radial-gradient(rgba(173, 255, 47, 0.5), rgba(70, 150, 229, 0.5));
}

#minty-gradient-alerts {
    background: radial-gradient(rgba(70, 150, 229, 0.5), rgba(173, 255, 47, 0.5));
}

#minty-gradient-rest {
    background-image: linear-gradient(to bottom, rgba(173, 255, 47, 0.5) 0, rgba(70, 150, 229, 0.5) 100%);
}

#minty-gradient-history {
    background: radial-gradient(rgba(173, 255, 47, 0.5), rgba(70, 150, 229, 0.5));
}

#minty-gradient-security {
    background-image: linear-gradient(to bottom, rgba(70, 150, 229, 0.5) 0, rgba(173, 255, 47, 0.5) 130%);
}

#minty-gradient-api {
    background: radial-gradient(rgba(173, 255, 47, 0.5), rgba(70, 150, 229, 0.5));
}

/** End Gradient */


/* Footer icons */

#footer.ul.icons {
    border: 2px dashed red !mportant;
    text-shadow: 0px 0px 50px greenyellow,
        5px 5px 50px #4696e5, -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white !important;
}

.fa-github:hover,
.fa-github-alt:hover,
.license:hover,
.template:hover {
    color: black !important;
    text-shadow: 0px 0px 50px greenyellow,
        5px 5px 50px #4696e5;
}

.fa-steam:hover {
    color: #00adee !important;
    text-shadow: 0px 0px 50px greenyellow,
        5px 5px 50px #4696e5, -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.fa-youtube:hover {
    color: #FF3333 !important;
    text-shadow: 0px 0px 50px greenyellow,
        5px 5px 50px #4696e5, -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.fa-linkedin:hover {
    color: #4875B4 !important;
    text-shadow: 0px 0px 50px greenyellow,
        5px 5px 50px #4696e5, -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.fa-facebook:hover {
    color: #3B5998 !important;
    text-shadow: 0px 0px 50px greenyellow,
        5px 5px 50px #4696e5, -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.fa-reddit:hover {
    color: #ff4301 !important;
    text-shadow: 0px 0px 50px greenyellow,
        5px 5px 50px #4696e5, -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

/* GitHub Ribben */
.github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {

    0%,
    100% {
        transform: rotate(0)
    }

    20%,
    60% {
        transform: rotate(-25deg)
    }

    40%,
    80% {
        transform: rotate(10deg)
    }
}

@media (max-width:500px) {
    .github-corner:hover .octo-arm {
        animation: none
    }

    .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out
    }
}

/* End GitHub Ribben */

/* MSS - Minty Sensor Server */
@keyframes line-anim {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes after-effects-mss {
    to {
        stroke: black;
        stroke-width: 1;
    }
}

@keyframes after-effects {
    to {
        stroke: black;
        stroke-width: 1;
    }
}

@keyframes fill {
    from {
        fill: transparent;
    }

    to {
        fill: white;
    }
}

@keyframes fill-mss {
    from {
        fill: transparent;
        stroke: white;
    }

    to {
        fill: greenyellow;
        stroke: greenyellow;
    }
}

#minty-banner-svg {
    /*  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -300%);*/
}

#minty-banner-svg path:nth-child(1) {
    stroke-dasharray: 400.6611022949219;
    stroke-dashoffset: 400.6611022949219;
    animation: line-anim 1s ease forwards 0s, fill-mss 1s ease forwards 0.5s, after-effects-mss 0.5s ease forwards 0s;
}

#minty-banner-svg path:nth-child(2) {
    stroke-dasharray: 266.7005310058594;
    stroke-dashoffset: 266.7005310058594;
    animation: line-anim 1s ease forwards 0.1s, fill-mss 1s ease forwards 0.6s, after-effects-mss 0.5s ease forwards 0.1s;
}

#minty-banner-svg path:nth-child(3) {
    stroke-dasharray: 266.7001037597656;
    stroke-dashoffset: 266.7001037597656;
    animation: line-anim 1s ease forwards 0.2s, fill-mss 1s ease forwards 0.7s, after-effects-mss 0.5s ease forwards 0.2s;
}

#minty-banner-svg path:nth-child(4) {
    stroke-dasharray: 44.92921447753906;
    stroke-dashoffset: 44.92921447753906;
    animation: line-anim 1s ease forwards 0.30000000000000004s, fill 1s ease forwards 0.8s, after-effects 0.5s ease forwards 0.30000000000000004s;
}

#minty-banner-svg path:nth-child(5) {
    stroke-dasharray: 400.660400390625;
    stroke-dashoffset: 400.660400390625;
    animation: line-anim 1s ease forwards 0.4s, fill 1s ease forwards 0.9s, after-effects 0.5s ease forwards 0.4s;
}

#minty-banner-svg path:nth-child(6) {
    stroke-dasharray: 113.33560180664062;
    stroke-dashoffset: 113.33560180664062;
    animation: line-anim 1s ease forwards 0.5s, fill 1s ease forwards 1s, after-effects 0.5s ease forwards 0.5s;
}

#minty-banner-svg path:nth-child(7) {
    stroke-dasharray: 197.9166717529297;
    stroke-dashoffset: 197.9166717529297;
    animation: line-anim 1s ease forwards 0.6000000000000001s, fill 1s ease forwards 1.1s, after-effects 0.5s ease forwards 0.6000000000000001s;
}

#minty-banner-svg path:nth-child(8) {
    stroke-dasharray: 146.14852905273438;
    stroke-dashoffset: 146.14852905273438;
    animation: line-anim 1s ease forwards 0.7000000000000001s, fill 1s ease forwards 1.2000000000000002s, after-effects 0.5s ease forwards 0.7000000000000001s;
}

#minty-banner-svg path:nth-child(9) {
    stroke-dasharray: 202.38914489746094;
    stroke-dashoffset: 202.38914489746094;
    animation: line-anim 1s ease forwards 0.8s, fill 1s ease forwards 1.3s, after-effects 0.5s ease forwards 0.8s;
}

#minty-banner-svg path:nth-child(10) {
    stroke-dasharray: 266.70159912109375;
    stroke-dashoffset: 266.70159912109375;
    animation: line-anim 1s ease forwards 0.9s, fill 1s ease forwards 1.4s, after-effects 0.5s ease forwards 0.9s;
}

#minty-banner-svg path:nth-child(11) {
    stroke-dasharray: 218.8108367919922;
    stroke-dashoffset: 218.8108367919922;
    animation: line-anim 1s ease forwards 1s, fill 1s ease forwards 1.5s, after-effects 0.5s ease forwards 1s;
}

#minty-banner-svg path:nth-child(12) {
    stroke-dasharray: 197.9146270751953;
    stroke-dashoffset: 197.9146270751953;
    animation: line-anim 1s ease forwards 1.1s, fill 1s ease forwards 1.6s, after-effects 0.5s ease forwards 1.1s;
}

#minty-banner-svg path:nth-child(13) {
    stroke-dasharray: 204.9868927001953;
    stroke-dashoffset: 204.9868927001953;
    animation: line-anim 1s ease forwards 1.2000000000000002s, fill 1s ease forwards 1.7000000000000002s, after-effects 0.5s ease forwards 1.2000000000000002s;
}

#minty-banner-svg path:nth-child(14) {
    stroke-dasharray: 199.09335327148438;
    stroke-dashoffset: 199.09335327148438;
    animation: line-anim 1s ease forwards 1.3s, fill 1s ease forwards 1.8s, after-effects 0.5s ease forwards 1.3s;
}

#minty-banner-svg path:nth-child(15) {
    stroke-dasharray: 116.3485336303711;
    stroke-dashoffset: 116.3485336303711;
    animation: line-anim 1s ease forwards 1.4000000000000001s, fill 1s ease forwards 1.9000000000000001s, after-effects 0.5s ease forwards 1.4000000000000001s;
}

#minty-banner-svg path:nth-child(16) {
    stroke-dasharray: 266.7002258300781;
    stroke-dashoffset: 266.7002258300781;
    animation: line-anim 1s ease forwards 1.5s, fill 1s ease forwards 2s, after-effects 0.5s ease forwards 1.5s;
}

#minty-banner-svg path:nth-child(17) {
    stroke-dasharray: 218.80824279785156;
    stroke-dashoffset: 218.80824279785156;
    animation: line-anim 1s ease forwards 1.6s, fill 1s ease forwards 2.1s, after-effects 0.5s ease forwards 1.6s;
}

#minty-banner-svg path:nth-child(18) {
    stroke-dasharray: 116.35002899169922;
    stroke-dashoffset: 116.35002899169922;
    animation: line-anim 1s ease forwards 1.7000000000000002s, fill 1s ease forwards 2.2s, after-effects 0.5s ease forwards 1.7000000000000002s;
}

#minty-banner-svg path:nth-child(19) {
    stroke-dasharray: 160.58523559570312;
    stroke-dashoffset: 160.58523559570312;
    animation: line-anim 1s ease forwards 1.8s, fill 1s ease forwards 2.3s, after-effects 0.5s ease forwards 1.8s;
}

#minty-banner-svg path:nth-child(20) {
    stroke-dasharray: 218.80804443359375;
    stroke-dashoffset: 218.80804443359375;
    animation: line-anim 1s ease forwards 1.9000000000000001s, fill 1s ease forwards 2.4000000000000004s, after-effects 0.5s ease forwards 1.9000000000000001s;
}

#minty-banner-svg path:nth-child(21) {
    stroke-dasharray: 116.35073852539062;
    stroke-dashoffset: 116.35073852539062;
    animation: line-anim 1s ease forwards 2s, fill 1s ease forwards 2.5s, after-effects 0.5s ease forwards 2s;
}

/* End MSS - Minty Sensor Server */