.mollyquestions {
    font-size: 13pt;
}

.mollyquestionsSmall {
    font-size: 10pt;
}

.mainmollyimg {
    width: 70px;
}

.popover-header {
    text-align: center !important;
    margin: 0 auto;
}

.popover {
    max-width: 175px !important;
}

.molly {
    margin: 0 auto;
}

.space-1 {
    margin: 4px 0px;
}

.space-2 {
    margin: 8px 0px;
}

.space-3 {
    margin: 12px 0px;
}

.space-4 {
    margin: 16px 0px;
}

.loginform {
    min-width: 300px;
    max-width: 50%;
    margin: 150px auto 10px;
}

.hplogo {
    width: 100%;
    height: 100px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.hplogo2 {
    width: 100%;
    height: 500px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.subtitle {
    text-align: center;
}

.btn-purple {
    background-color: #593196;
    color: #fff;
}

    .btn-purple:hover {
        background-color: #3d2151;
        color: #fff;
    }

.mainlogo img {
    width: 150px;
}

.parallax {
    /* The image used */
    background-image: url('../../Content/images/heroimage2.jpg');
    /* Set a specific height */
    min-height: 400px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
    padding-top: 50px;
}

    .parallax:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to bottom right, #593196, #4a324e);
        opacity: .9;
    }




.Welcomemainimg {
    background-image: url(images/WELCOMEMAIN.png);
    height: 380px;
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
    top: 0px;
    border-top: 3px black solid;
    border-bottom: 3px black solid;
    background-size: auto;
    padding-top: 5px;
}

    .Welcomemainimg:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to bottom right, #593196, #4a324e);
        opacity: .9;
    }



.jumbotron {
    position: relative;
    z-index: 200;
    background-color: rgba(255, 255, 255, 0.00) !important;
}

.jumbo-video {
    width: 100% !important;
    object-fit: cover;
    height: 100%;
    position: absolute !important;
    z-index: 99;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.subtitle {
    color: #f0f0f0;
    letter-spacing: 2px;
    font-variant: small-caps;
    font-size: 35px;
}

.tagline {
    color: #f0f0f0;
    letter-spacing: 2px;
    font-variant: small-caps;
    font-size: 18px;
}

.linewhite {
    width: 200px;
    height: 2px;
    text-align: center;
    margin: 0 auto;
    background-color: #fff;
}

.options img {
    width: 160px;
    height: 160px;
}

.mainoptions p {
    padding: 40px;
    padding-top: 1px;
    font-size: 13pt;
}

.mainoptions h3 {
    width: 200px;
    color: #593196;
    border-bottom: 1px #593196 dashed;
    margin: 0px auto;
    margin-top: 20px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    font-variant: small-caps;
}

.fire img {
    width: 70px;
}

.getstarted {
    background-color: rgba(89, 49, 150, 0.20);
    height: 350px;
    background-image: url('../../Content/images/gears.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.btn-pill {
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.45);
}

.btn-darkpurple {
    width: 200px;
    padding: 15px;
    font-size: 20px;
    background-color: #4a324e;
    border: 1px solid #fff;
    color: #fff;
    font-variant: small-caps;
}

    .btn-darkpurple:hover {
        background-color: rebeccapurple;
        color: #fff;
    }

.btn-getstarted {
    margin: 10px;
    margin-top: 10px;
}

.THREEitems {
    margin: 15px 0px;
    margin-bottom: 10px;
}

.imgshadow img {
    width: 100%;
    opacity: .8;
}

.imgshadow2 img {
    width: 100%;
    opacity: .8;
}

.getstartedmaininfo {
    width: 500px;
    margin: 0 auto;
    text-align: center;
}

.getstartedlocation {
    padding-top: 85px;
}

.getstartedmaininfo p {
    font-size: 17px;
}

.getstartedmaininfo h3 {
    font-variant: small-caps;
}


.itemimage img {
    width: 50px;
    margin-top: 5px;
}


.fouroptions h2 {
    font-variant: small-caps;
    color: #593196;
    border-bottom: 1px dotted #593196;
}

.fouroptions {
    margin-bottom: 100px;
}

    .fouroptions p {
        font-size: 12pt;
    }

.spacebottom {
    margin-bottom: 30px;
}

.effectively h2 {
    font-variant: small-caps;
    color: #593196;
    border-bottom: 1px dotted #593196;
}

.effectively p {
    font-size: 12pt;
}

.effectively {
    margin-top: 50px;
    margin-bottom: 50px;
}

.bottomissue {
    margin-bottom: 100px;
}

.btn-darkpurple {
    width: 200px;
    padding: 15px;
    font-size: 20px;
    background-color: #4a324e;
    border: 1px solid #fff;
    color: #fff;
    font-variant: small-caps;
}

    .btn-darkpurple:hover {
        background-color: rebeccapurple;
        color: #fff;
    }

.savetime {
    min-height: 200px;
    background-image: linear-gradient(to bottom right, #593196, #4a324e);
}

    .savetime h5 {
        color: #fff;
        text-align: center;
        padding-top: 40px;
        margin-bottom: 20px;
    }

    .savetime h2 {
        color: #fff;
        text-align: center;
        padding-top: 40px;
        margin-bottom: 20px;
    }

.WhatisClockwyz {
    margin-top: 30px;
    margin-bottom: 30px;
}

    .WhatisClockwyz h1 {
        color: rebeccapurple;
        font-size: 40px;
        font-variant: small-caps;
        border-bottom: 1px dotted #593196;
    }


@media (max-width: 528px) {

    .getstartedmaininfo {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .getstartedlocation {
        padding-top: 55px;
    }
}


.border-white {
    border: 1px solid #fff;
    padding: 10px;
}

.welcome-getstarted {
    max-width: 400px;
    margin: 20px auto;
}

input:not([type="radio"]):not([type="checkbox"]), button {
    -webkit-appearance: none;
    border-radius: 0;
}

.frow {
    display: flex;
    margin: 4px auto;
}

.fcol-left {
    flex: 1;
}

.fcol-right {
    text-align: right;
    flex: 1;
}


/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
    background-color: white;
    height: 40px;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

.task_assigness {
    /*border-radius: 0px 0px 10px 10px;*/
    background-color: rgba(0, 0, 0, 0.85);
}

.bg-light > .task_assigness span small {
    padding-right: 10px;
}

.linetask {
    height: 1px;
    width: 100%;
    margin: 5px 0px;
    background-color: rgba(61, 33, 81, 0.35);
}

.linetask2 {
    height: 1px;
    width: 100%;
    margin: 5px 0px;
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: rgba(61, 33, 81, 0.35);
}

.spacetaskbadge {
    text-align: right;
    margin-bottom: 10px;
}

.flexproject {
    display: flex;
    flex-wrap: wrap;
}

.flexproject-items {
    margin: 15px 1%;
    width: 23%;
}

.flex-fit {
    flex: 1;
}

.listpad {
    padding: 20px;
}

.listpadtask {
    padding: 15px;
    padding-bottom: 0px;
}

.task_assigness {
    font-size: 12px;
    padding-bottom: 2px;
}

.bg-light > .task_assigness span {
    color: #bca8d9;
}

.Edit_Task a:hover {
    text-decoration: none;
}

.btn_addtime {
    background-color: #593196;
    color: #fff;
    text-align: center;
    padding: 10px;
    border: 1px solid #000;
}

    .btn_addtime:hover {
        cursor: pointer;
        background-color: rgba(61, 33, 81, 1);
    }

.purpletext {
    color: #593196;
}

.text-purple {
    color: #501d9d;
}




.bg-light.selectable:hover .text-muted {
    color: rgba(255, 255, 255, 0.70) !important;
}


.bg-light.selectable:hover > .listpad .purpletext {
    color: #fff !important;
}

.bg-light.selectable:hover > .listpadtask .purpletext {
    color: #fff !important;
}

.bg-light.selectable:hover > .task_assigness span {
    color: #fff !important;
}

.bg-light.selectable:hover, .bg-light.selectable:hover > .h5 {
    background-color: rgba(89, 49, 150, .5) !important;
    color: #fff !important;
    cursor: pointer;
}

    .bg-light.selectable:hover > .a {
        color: #fff !important;
        cursor: pointer;
    }

    .bg-light.selectable:hover, .bg-light.selectable:hover .text-dark {
        color: #fff !important;
    }
        bg-light.selectable:hover, .bg-light.selectable:hover .text-dark h5 {
            color: #fff !important;
        }

        .bg-light.selectable:hover, .bg-light.selectable:hover .text-danger {
            color: #fff !important;
        }

            bg-light.selectable:hover, .bg-light.selectable:hover .text-danger h5 {
                color: #fff !important;
            }
.bg-light:nth-child(even) {
    background-color: #f0edf7;
}


.selectable.active {
    background-color: rgba(89, 49, 150, .75) !important;
    color: #fff !important;
    cursor: pointer;
}


.previewitem_suggestion {
    text-align: center;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 2px solid #00A6AC;
    display: inline-block;
}

.suggestion-item {
    color: #000;
    font-size: 12pt;
    padding-top: 10px;
}

.btn-flytrap-blue {
    background-color: #00A6AC;
    border-radius: 0px 0px 10px 10px;
    color: white;
}

.previewlisting {
    margin-bottom: 10px;
}

.titlelisting {
    margin: 5px;
}


.service-grid {
    display: table;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
}

.service-item {
    border: 1px solid #e1e1e1;
    padding: 10px;
}

.mainapp {
    margin-left: 60px;
    margin-top: 60px;
    margin-right: 300px;
}


.flytrapnav_listing {
    position: fixed;
}
/*Navigation Left Bar Begin*/
.leftnavbar {
    position: fixed;
    top: 50px;
    bottom: 0;
    left: 0;
    padding: 5px;
    width: 60px;
    background-color: #333;
    color: #fff;
}

.navbutton {
    font-size: 22px;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    margin: 8px auto;
}

.navbutton-close {
    font-size: 22px;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    margin: 8px auto;
    border-bottom: 1px solid rgba(255,255,255,.2);
}

    .navbutton-close a {
        color: #e1e1e1;
    }

.navbutton a {
    color: #fff;
}

.navbutton:hover a {
    color: #02ccd3;
}

.navbutton.active a {
    color: #02ccd3;
}

/*Navigation Left Bar End*/
.media-item {
    border: 1px solid #e1e1e1;
    padding: 15px 10px 10px;
    position: relative;
    border-radius: 10px;
}

.media-delete {
    color: #fff;
    background-color: #a00;
    font-size: 13pt;
    position: absolute;
    line-height: 19pt;
    vertical-align: middle;
    top: 10px;
    right: 4px;
    z-index: 50;
    padding: 3px 10px;
    border-radius: 50%;
    border: 3px solid #fff;
}

    .media-delete:hover a, a.media-delete:hover {
        color: #fff !important;
        background-color: #c00;
        border: 3px solid #fff;
    }
/*Navigation Status Panel Begin*/

.status-panel-right {
    position: fixed;
    top: 50px;
    bottom: 0;
    right: 0;
    padding: 5px;
    width: 300px;
    background-color: #333;
    color: #fff;
}

    .status-panel-right h5 span {
        font-size: 15pt;
        font-weight: bold;
    }

.status-panel-right-logo {
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
}

.appicon {
    border-radius: 50%;
}

.status-panel-right-featured-image {
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
}

.lnkIconPhotoHover:hover, .lnkFeaturedPhoto:hover {
    cursor: pointer !important;
}

.lineimg {
    height: 1px;
    width: 90%;
    background-color: #e1e1e1;
    margin: 20px auto;
}


/*Navigation Status Panel Begin*/


.note {
    background-color: #faf7bb;
    color: #333;
    border: 1px solid #ababab;
    margin: 5px auto;
    padding: 5px;
    font-size: 10pt;
}

.media-content {
    min-width: 320px;
    display: inline-block;
    min-height: 200px;
    margin: 4px 8px;
}

.recoding, a i.recoding {
    color: #f00 !important;
}

a.text-white {
    color: #fff !important;
}

.explainermodal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4000;
}

    .explainermodal .backdrop-overlay {
        background: rgba(0,0,0,.9);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 4001;
    }

    .explainermodal .explainer-content {
        position: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 4002;
    }

    .explainermodal.ng-hide-add .explainer-content, .explainermodal.ng-hide-remove .explainer-content {
        -webkit-transition: 1s ease-in-out opacity;
        -moz-transition: 1s ease-in-out opacity;
        -ms-transition: 1s ease-in-out opacity;
        -o-transition: 1s ease-in-out opacity;
        transition: 1s ease-in-out opacity;
        opacity: 1;
    }

    .explainermodal.ng-hide .explainer-content {
        opacity: 0;
    }




    .explainermodal .explainer-close {
        background: rgba(0,0,0,.4);
        position: fixed;
        top: 10px;
        right: 20px;
        z-index: 4003;
        width: 30px;
        height: 30px;
        color: #fff;
        background-color: #a00;
        border-radius: 50%;
        border: 1px solid #fff;
        font-weight: 600;
        padding: 1px 8px;
        font-size: 13pt;
        text-align: center;
        vertical-align: middle;
    }

    .explainermodal .explainer-paging {
        position: fixed;
        top: 15px;
        right: 70px;
        font-weight: 600;
        z-index: 4003;
        color: #fff;
    }

.explainericon {
    margin: 8px 10px;
}

    .explainericon a {
        font-size: 18pt;
    }


/*\
 * Restore Bootstrap 3 "hidden" utility classes.
\*/

/* Breakpoint XS */
@media (max-width: 575px) {
    .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down,
    .hidden-xs-up,
    .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl {
        display: none !important;
    }
}

/* Breakpoint SM */
@media (min-width: 576px) and (max-width: 767px) {
    .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down,
    .hidden-xs-up, .hidden-sm-up,
    .hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl {
        display: none !important;
    }
}

/* Breakpoint MD */
@media (min-width: 768px) and (max-width: 991px) {
    .hidden-md-down, .hidden-lg-down, .hidden-xl-down,
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up,
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl {
        display: none !important;
    }
}

/* Breakpoint LG */
@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-lg-down, .hidden-xl-down,
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up,
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl {
        display: none !important;
    }
}

/* Breakpoint XL */
@media (min-width: 1200px) {
    .hidden-xl-down,
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up,
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg {
        display: none !important;
    }
}


/*Kendo Controls Color Overrides*/
.k-state-selected {
    background-color: #593196 !important;
    border-color: rgba(89, 49, 150, .75) !important;
}

.k-today {
    border-color: rgba(89, 49, 150, .75) !important;
    color: #593196 !important;
    box-shadow: inset 0 0 0 1px #593196 !important;
    -webkit-box-shadow: inset 0 0 0 1px #593196 !important;
}

.k-calendar .k-today .k-link {
    color: #593196 !important;
}


.k-switch-on .k-switch-container {
    border-color: #ccc;
    color: #fff;
    background-color: #501d9d !important;
}
.isnote{
    background-color:cornsilk !important;
}


#statusResearch, #statusInProgress, #statusNew, #statusTesting, #statusReview, #statusBacklog {
    width: 400px;
    min-height: 80vh; 
    padding: 5px 15px;
}
    #statusResearch.dragover, #statusInProgress.dragover, #statusNew.dragover, #statusTesting.dragover, #statusReview.dragover, #statusBacklog.dragover {
        background-color: #f1f1f1;
        border: 3px dashed #ababab;
    }