/*
    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; */
    /* One flat brand green, not the blue gradient this used to wear. The
       launcher is the app's own control, so it takes the app's own colour —
       var() rather than a literal, so a themed --primary-color carries it. The
       hex after the comma is the fallback for the variable not resolving, not a
       second opinion about the colour. */
    background: var(--primary-color, #81B504);
    box-shadow: -7px 0px 10px #0000005c;
    /* Only the shadow moves on hover, so only the shadow is transitioned —
       naming the property keeps a future background change from animating. */
    transition: box-shadow .2s ease;
}


/* Hover casts a THICKER SHADOW and changes nothing else. `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. A bigger, darker cast in the same direction as the resting one
   reads as the button coming forward instead. */
.mail-icon:hover {
    box-shadow: -14px 4px 28px #0000009e;
}
/* The shadow is the WHOLE hover state, and this is what guarantees it. 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 lift a box on hover without ever naming this button. Pinning the four
   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: var(--primary-color, #81B504); }
.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;}
}