/*
    Created on : 14 Jan, 2019, 10:32:35 AM
    Author     : ioss
*/
.btn-light-grey {
    background-color: #dedede;
    color: #58666e;
    cursor: pointer;
}

.input-color {
    position: relative;
}

.input-color input {
    padding-left: 20px;
}

.input-color .color-box {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #ccc;
    border: 1px solid black;
    position: absolute;
    left: 5px;
    top: 2px;
}

.table-header {
    background-color: #e5e5e5;
}

.input-color .color-desc {
    padding-left: 20px;
}

.ck-editor__editable {
    min-height: 200px;
}

.modal-loader {
    text-align: center;
}

@media screen and (min-width: 768px) {
    .modal-loader:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }
}

.modal-loader-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.iampointer {
    cursor: pointer;
}

.iamdragable {
    cursor: grabbing;
}

/*Block Borders*/
.inland-block {
    height: 100vh;
    width: 100wv;
    position: relative;
}

.inland-block::after {
    background: repeating-linear-gradient(45deg, #fff, #fff 10px, #3C7AB8 0, #3C7AB8 20px, #fff 0, #fff 30px, #CB2C4B 0, #CB2C4B 40px);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: "";
    z-index: 0;
}

.inland-block::before {
    background-color: #fff;
    position: absolute;
    top: 10px;
    left: 10px;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    content: "";
    z-index: 1;
    border-radius: 20px;
}

.nav-brand-site-logo {
    width: 140px;
    max-height: 50px !important;
    margin-top: 10px !important;
}

.productivity-login .nav-brand-site-logo {
    width: 250px;
    max-height: 60px !important;
    height: auto;
    margin-top: 0px !important;
}

@media (max-width:440px) {
    .productivity-login .nav-brand-site-logo {
        width: 190px;
        margin: auto;
        margin-bottom: 2rem !important;
    }

    .productivity-login .list-group-item {
        border-radius: .125rem;
        padding: .657rem 1.258rem;
        height: auto;
        margin-bottom: 1.5rem;
    }

    .productivity-login .btn {
        padding: 1.1rem 1.258rem;
        border-radius: .125rem;
    }
}

.app-aside-folded .nav-brand-site-logo {
    width: 140px;
}

/*Ribbons*/
.select-style {
    width: 100%;
    height: 31px;
    border-radius: 2px;

}

/* The ribbon */
.ribbon-wrapper {
    position: relative;
    z-index: 998;
}

.ribbon-front {
    background-color: #cc3333;
    height: 50px;
    width: 240px;
    position: relative;
    left: -10px;
    z-index: 2;
    font: 20px/50px bold Verdana, Geneva, sans-serif;
    color: #f8f8f8;
    text-align: center;
    text-shadow: 0px 1px 2px #cc6666;
}

.invisible-form {
    background: none !important;
    border: none;
}

.invisible-check {
    background: none !important;
}

.ribbon-front,
.ribbon-back-left,
.ribbon-back-right {
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    -khtml-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    -o-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
}

.bg_file_upload {
    background-color: #f6f8f8;
    padding: 6px;
}

.ribbon-edge-topleft,
.ribbon-edge-topright,
.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
    position: absolute;
    z-index: 1;
    border-style: solid;
    height: 0px;
    width: 0px;
}

.ribbon-edge-topleft,
.ribbon-edge-topright {}

.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
    top: 50px;
}

.ribbon-edge-topleft,
.ribbon-edge-bottomleft {
    left: -10px;
    border-color: transparent #9B1724 transparent transparent;
}

.ribbon-edge-topleft {
    top: -5px;
    border-width: 5px 10px 0 0;
}

.ribbon-edge-bottomleft {
    border-width: 0 10px 0px 0;
}

.ribbon-edge-topright,
.ribbon-edge-bottomright {
    left: 220px;
    border-color: transparent transparent transparent #9B1724;
}

.ribbon-edge-topright {
    top: 0px;
    border-width: 0px 0 0 10px;
}

.ribbon-edge-bottomright {
    border-width: 0 0 5px 10px;
}

.padding_both_small {
    padding-left: 3px;
    padding-right: 0px;
}

.padding_both {
    padding-left: 0px;
    padding-right: 0px;
}

.mark_paid {
    margin-top: 26px;
}

@-webkit-keyframes flow {
    0% {
        left: -20px;
        opacity: 0;
    }

    50% {
        left: 100px;
        opacity: 0.3;
    }

    100% {
        left: 180px;
        opacity: 0;
    }
}

@keyframes flow {
    0% {
        left: -20px;
        opacity: 0;
    }

    50% {
        left: 100px;
        opacity: 0.3;
    }

    100% {
        left: 180px;
        opacity: 0;
    }
}

.glow {
    background: rgb(255, 255, 255);
    width: 40px;
    height: 100%;
    z-index: 999;
    position: absolute;
    -webkit-animation: flow 1.5s linear infinite;
    -moz-animation: flow 1.5s linear infinite;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(1%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%);
    /* IE10+ */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
    /* IE6-9 */
    border-left: 1px solid #fff;
}

.no_data_text {
    color: #f0a5a5;
}

.mail-icon {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 60px;
    right: 0px;
    padding: 10px;
    z-index: 9999;
    border-radius: 50%;
    /* overflow: hidden; */
    /* Matches the header's AI assistant button (.ai-header-icon in
       ai_chat.css), the green round control of the new design: the same
       135deg brand-green gradient, green glow and white inner top line, and the
       same widening glow on hover (but none of its movement) — scaled from
       its 30px to this 60px. The launcher is
       the app's own control, so the light end of the gradient is the app's own
       colour, var() rather than a literal, so a themed --primary-color carries
       it; #628a03 is the dark end ai_chat.css calls --ai-green-dark, written
       out because that variable only exists where ai_chat.css loads. */
    background: linear-gradient(135deg, var(--primary-color, #81B504), #628a03);
    box-shadow: 0 4px 16px rgba(129, 181, 4, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: box-shadow .25s cubic-bezier(.2, .8, .2, 1);
}
.dark-mode .mail-icon {
    box-shadow: 0 4px 20px rgba(129, 181, 4, .25), inset 0 1px 0 rgba(255, 255, 255, .25);
}


/* Hover keeps the colour and the glyph exactly as they are. `opacity: .8` used
   to wash the brand green out and take the white glyph with it, so the
   launcher answered a pointer by looking disabled — the one state a live
   control must never wear. Instead its glow widens, and that is the whole
   hover state: the tile does not move or grow. */
.mail-icon:hover {
    box-shadow: 0 8px 28px rgba(129, 181, 4, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}
/* The launcher is a <div> wrapping an <a> wrapping an <img>, sitting under
   every global stylesheet the app loads — any of them can dim a link, tint an
   image or move a box on hover without ever naming this button. Pinning the
   properties that could carry such an effect means the tile keeps its colour,
   its glyph and its position no matter what else is on the page.

   The plan-locked variant is unaffected: its half-opacity is an inline style
   on the <a>, which outranks a stylesheet rule, so it stays dimmed. */
.mail-icon:hover,
.mail-icon:hover a,
.mail-icon:hover img {
    opacity: 1;
    filter: none;
    transform: none;
}
.mail-icon:hover { background: linear-gradient(135deg, var(--primary-color, #81B504), #628a03); }
.mail-icon:hover a,
.mail-icon:hover img { background: none; }

/* No nudge. The PNG this replaced carried uneven internal margins and needed
   -3px/+1px to look centred; support-ico.svg is centred on its own viewBox, so
   correcting it here would push it back off. */
.mail-icon img {
    width: 100%;
}

/* app-overview-style-starts */

.main_view_section .users_access_sec {
    background: #EBF8FD;
    border-radius: 5px;
    width: 100%;
    height: auto;
    overflow: auto;
    padding-left: 8px;
    margin-bottom: 10px;
}
.user_detail_sec h4{
    width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.main_view_section .user_parent_section {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px 10px;
    position: relative;
}
.users_access_sec::-webkit-scrollbar {
    width: 8px;
    height: 4px;
}

.users_access_sec::-webkit-scrollbar-track {
    background-color: #d2e3e9;
    border-radius: 10px;
}

.users_access_sec::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #999999;
    border: 0;
}


.main_view_section .user_active_sec {
    background: #FAFEFF;
    box-shadow: -16px 4px 14px rgba(0, 0, 0, 0.05);
    /* border-radius: 10px 0px 0px 10px; */
    left: -8px;
    width: 110%;
    position: relative;
    border-bottom: 4px #81B504 solid;
}
.user_clr_btn{background-color: transparent;}

.main_view_section li {
    list-style: none;
    /* margin-bottom: 6px; */
}

.users_access_sec ul {
    padding: 5px !important;
    display: flex;
    white-space: nowrap;
    gap: 10px;
    margin-bottom: 0;
}
.flex-row{
    display: flex;
    flex-wrap: wrap;
}
.flex-row .col-md-3{
    display: flex;
    flex-direction: column;
    padding-left: 0;
}
.flex-row .col-md-3 .col-md-12{
    width: 100%;
    flex: 0 0 33.33% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.flex-row #get_height{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 7px;
}
.flex-row #get_height .productivity_bar_graph_sec{
    width: 100%;
}
.overview_top_quick_box_cnt{
    text-align: left;
}
.overview_top_quick_box{
    align-items: center;
}
.prdct_staff_box legend{
        border-bottom: 1px solid #f7f7f7;
}

.user_parent_section .user_avatar_bg {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: #81B504;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-user-fltr #search_user{background-color: transparent;}

.user_avatar_bg {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #81B504;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user_avatar_bg h6 {
    color: #fff;
    font-size: 13px;
    margin: 0;
}

.user_detail_sec h4 {
    font-weight: 500;
    font-size: 16px;
    color: #58666E;
    margin-bottom: 3px !important;
    margin-top: 3px;
}

.user_detail_sec h5 {
    font-weight: 400;
    font-size: 12px;
    color: #58666E;
    margin: 0;
}

.users_access_sec h3 {
    font-weight: 500;
    font-size: 18px;
    color: #58666E;
}


/* For WebKit-based browsers */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 20px;
    border: 3px solid #f5f5f5;
}

/* For Firefox */
::-moz-scrollbar {
    width: 10px;
}

::-moz-scrollbar-track {
    background-color: #f5f5f5;
}

::-moz-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 20px;
    border: 3px solid #f5f5f5;
}



.productivity_bar_graph_sec {
    /* background: #FAFEFF;
    border-radius: 5px;
    border: solid 1px #f3f3f3;
    padding:10px 20px; */
}

.productivity_bar_graph_sec .productivity_bar_bg {
    background: #FFFFFF;
    /* box-shadow: 0px 4px 24px rgb(159 157 157 / 18%); */
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    height: 100%;
    /* border: solid 1px #f3f3f3; */
}

.productivity_bar_graph_sec .productivity_graph_bg {
    background: #FFFFFF;
    /* box-shadow: 0px 4px 24px rgb(159 157 157 / 18%); */
    border-radius: 5px;
    padding: 10px;
    /* border: solid 1px #f3f3f3; */
}
/* .catogary_main_bg .catogary_bg {
    background: #FFFFFF;
    box-shadow: 0px 4px 14px rgba(159, 157, 157, 0.05);
    border-radius: 5px;
    padding: 10px;
} */

.catogary_main_bg{
    background: #FAFEFF;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    padding: 20px;
    margin-top: 10px;
}

.catogary_padding_style{
    padding: 0;
}

.logs_section{
    width: 100%;
    height: auto;
    padding: 10px;
    border-radius: 5px;
    background-color: #fff;
}

.logs_section img{
    width: 20px;
}
.logs_section td{
    padding: 12px 10px !important;
}
.catogary_main_bg .panel{
    margin-bottom: 0 !important;
}


.H-selectR{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.range-picker{
    display: flex;
    align-items: center;
}

.grph-btm-details {
    display: table;
    width: auto;
    margin: 10px auto 0;
    padding: 0 10px;
    border-radius: 60px;
    text-align: center;
}

.grph-btm-details>div {
    display: inline-block;
    margin: 10px 4px 0;
}
.productivity_graph_bg  .grph-btm-details>div {
    display: inline-block;
    margin: 10px 10px 0;
}
.grph-btm-details span {
    font-size: 14px;
}



.product_graph_inner_details  {
    width: 100%;
    height: 60px;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    font-size: 15px;
    line-height: 30px;
    top: 0;
    color: #666;
    line-height: 32px;
}

.product_graph_inner_details strong {
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    font-size: 35px;
    color: #81B504;
    font-weight: 400;
}

.productivity_bar_graph_sec .row{
    display: flex;
    flex-wrap: wrap;
}

.over_view_dnd_legelnd{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 20px;
}
.over_view_dnd_legelnd div{width:100%;font-size: 12px;}
.over_view_dnd_legelnd span{width: 20px;height: 8px;display: inline-block;}
.app_url_td_view{width: 100%;display: inline-block;font-size: 12px;color: #666;position: relative;top: -5px;}
.overview_selcted_name{
    display: inline-block;
}
.supportCreateBox{
    width: 100%;
    max-width: 700px;
    display: inline-block;
    box-shadow: 0px 0px 20px #d5d5d545;
    padding: 20px;
    text-align: left;
    border: dashed 1px #ccc;
}
.supportCreateBox legend .fieldset-legend{
    font-size: 20px;
    color: #32383c;
    margin-bottom: 10px;
    display: inline-block;
}
.clickedTableClr{background-color: #f1f1f1;}
.login_with_social_sec{
    width: 100%;
    height: auto;
    display: inline-block;
    margin-top: 10px;
}
.login_or_dv{
    width: 100%;
    height: auto;
    display: inline-block;
    position: relative;
    text-align: center;
}
.login_or_dv::before{
    content: '';
    width: 100%;
    height: 2px;
    border-bottom: 1px dashed #e5e5e5;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 0;
}
.login_or_dv span{
    width: auto;
    background-color: #fff;
    padding: 5px 10px;
    position: relative;
    z-index: 5;
}
.login_with_social_sec .btn-block#login_using_sso {
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #fff;
    color: #242424 !important;
    border: solid 1px #e5e5e5;
    box-shadow: none;
    font-size: 16px;
}
.login_with_social_sec svg{position: relative;top: 3px;margin-right: 5px;}
.login_with_social_sec .btn-block#login_using_sso:hover{color: #fff !important;}


.login_with_social_sec{
    width: 100%;
    height: auto;
    display: inline-block;
    margin-top: 10px;
}
.login_or_dv{
    width: 100%;
    height: auto;
    display: inline-block;
    position: relative;
    text-align: center;
}
.login_or_dv::before{
    content: '';
    width: 100%;
    height: 2px;
    border-bottom: 1px dashed #e5e5e5;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 0;
}
.login_or_dv span{
    width: auto;
    background-color: #fff;
    padding: 5px 10px;
    position: relative;
    z-index: 5;
}
.login_with_social_sec .btn-block#login_using_sso {
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #fff;
    color: #242424 !important;
    border: solid 1px #e5e5e5;
    box-shadow: none;
    font-size: 16px;
}
.login_with_social_sec svg{position: relative;top: 3px;margin-right: 5px;}
.login_with_social_sec .btn-block#login_using_sso:hover{color: #fff !important;}
.productivity_bar_graph_sec .col-md-6 .panel.wrapper{padding: 10px !important;}

.staging-bar-badge{
    position: fixed;
    left: -24px;
    top: 24px;
    background-color: #F44336;
    color: #fff;
    padding: 3px 10px;
    font-weight: 500;
    transform: rotate(-42deg);
    z-index: 99999;
    min-width: 130px;
    text-align: center;
    font-size: 12px;
    font-family: "Poppins", sans-serif !important;
}


@media (max-width: 1630px) {
    .inn_percng {
      /* top: -7%; */
      margin-left: 0%;
    }
}

@media (max-width: 1480px) {
    .inn_percng {
      /* top: -7%; */
      margin-left: 3%;
    }
}
@media (max-width: 1403px) {
    .inn_percng {
      /* top: -7%; */
      margin-left: 6%;
    }
}
@media (max-width: 1366px) {
    .inn_percng {
      /* top: -7%; */
      margin-left: 0%;
    }
}

@media (max-width: 1350px) {
    .inn_percng {
      /* top: -7%; */
      left: 0%;
      margin-left: inherit;
    }

}
@media (max-width: 1366px) {
.over_view_dnd_chart{margin-left: -10% !important;}
}
@media (max-width: 1300px) {
    .inn_percng {
      top: 0;
      left: 5%;
    }
}
@media (max-width: 1250px) {
    .inn_percng {
        top: 20px;
        left: 4%;
    }
    .product_graph_inner_details strong{
        font-size: 28px;
    }
    .product_graph_inner_details{
        font-size: 12px;
        line-height: 24px;
    }
}
@media (max-width: 1206px) {
    .inn_percng {top: 20px;left: 4%;}
    .flex-row{flex-direction: column;}
    .main_view_section .col-md-3{width: 100%;display: flex;gap: 8px;padding-right: 20px !important;padding-left: 15px !important;flex-direction: row;}
    .flex-row #get_height{width: 100%;padding-left: 25px;}
    .flex-row .col-md-3 .col-md-12{padding: 0;}
}
@media (max-width: 1150px) {
    .over_view_dnd_chart { margin-left: -23% !important; }
}
@media (max-width: 1060px) {
    .over_view_dnd_chart { margin-left: -36% !important; }
}
@media (max-width: 768px) {
    .main_view_section .users_access_sec{margin-top: 0 !important;}
    .main_view_section .col-md-3{flex-direction: column;gap: 0;}
    .main_view_section .user_parent_section{padding: 0;}
}
@media (max-width: 991px) {
    .over_view_dnd_chart{margin-left: inherit !important;left: 0;right: 0;width: 300px; margin: auto !important;}
    .main_view_section .users_access_sec{height: auto !important;    margin-top: 60px;}
    .product_graph_inner_details{font-size: 10px;line-height: 15px;width: 120px;left: 0;right: 0;margin: auto;    padding-top: 19px;}
    .productivity_bar_graph_sec .row{width: 100%;flex-direction: column; margin: auto;}
    .inn_percng {
      top: -3%;
    }
    .productivity_bar_graph_sec{margin-top: 20px;padding: 0;}
    .product_graph_inner_details strong{
        font-size: 18px;
    }
    .flex-row #get_height{padding-left: 5px; padding-right: 0px;}
}

@media (max-width: 543px) {
    .inn_percng {top: -3%;}
    /* #productivity_graph .over_view_dnd_chart{width: 260px !important;height: 130px !important;} */
    .wrapper-md.page-heaad1 .over_view_Search_user_Sec .search-user-fltr {width: 100% !important;}
}
@media (max-width: 409px) {
    .inn_percng {
      top: -3%;
    }
    .product_graph_inner_details strong{
        font-size: 23px;
    }
    .product_graph_inner_details{
        font-size: 10px;
        line-height: 19px;
    }
}

@media (min-width:1080px){
    .productivity_bar_graph_sec .col-md-4{padding: 0 5px !important;}
    .productivity_bar_graph_sec .col-md-6{padding: 0 5px !important;}
}