#tasks-content-frame {
    margin: 20px auto;
    width: 100%;
    max-width: 700px;
    min-width: 390px;
}
.task_plus
{
    background: url('/pax/files/images/plus-darkgray.svg');
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: inline-block;
    position: absolute;
    top: 4px;
    left: 4px;
}
.task_nav_bttns
{
    border-radius: 18px;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1px;
    border: 1px solid #3a3a3a;
    background-color: #e8f0f7;
    padding: 8px 16px;
    cursor: pointer;
    display: inline-block;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.task_add_bttn
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 98px;
    height: 16px;
    text-align: right;
}

.pax-progress-progress
{
height: 20px;
font-size: 20px;
line-height: 20px;
font-weight: 500;
padding: 5px 0px;
text-align: center;
border-radius: 15px;
color: #ffffff;
box-shadow: inset 1px 1px 4px #3a3a3a;
background-color: #00cc00;
}
.pax-progress-frame
{
position: relative;
width: 300px;
height: 30px;
border-radius: 15px;
box-shadow: inset 1px 1px 4px #3a3a3a;
background-color: #eaeaea;
margin: 10px auto;
}
.task-progress-char
{
display: none;
margin-right: 10px;
font-size: 11px;
font-weight: 500;
line-height: 11px;
}
.pax-task-status-img-drop
{
display: inline-block;
border-radius: 50%;
height: 16px;
width: 16px;
margin-right: 10px;
}
.task_status_icon_mini
{
display: inline-block;
border-radius: 50%;
height: 8px;
width: 8px;
margin-right: 5px;
}
.pax-complete
{
background-position: center center;
background-repeat: no-repeat;
background-size: 16px 16px;
background-image: url('/pax/files/images/check-green.svg');
}
.pax-complete-mini
{
background-position: center center;
background-repeat: no-repeat;
background-size: 8px 8px;
background-image: url('/pax/files/images/check-green.svg');
}
.pax-nostart
{
background-color: #000000;
}
.pax-onhold
{
background-color: #ffaa00;
}
.pax-attn
{
background-color: #ffaa00;
}
.pax-inprogress
{
background-color: #00cc00;
}
.pax-inprogress-2
{
background-color: #34f;
}
.pax-inprogress-3
{
background-color: #00ccff;
}
.pax-inprogress-4
{
background-color: #82b;
}
.pax-serious
{
background-color: #cc0000;
}
.pax-overdue
{
background-color: #cc0000;
}
.pax-task-status-img
{
display: inline-block;
border-radius: 50%;
height: 16px;
width: 16px;
}
.pax-task-status-img-frame div
{
display: inline-block;
position: relative;
vertical-align: top;
border-radius: 50%;
height: 20px;
width: 20px;
}
.pax-task-status-img-frame
{
display: inline-block;
position:relative;
vertical-align: top;
height: 32px;
width: 32px;
padding: 6px;
background-color: #ffffff;
border-radius: 50%;
/* box-shadow: inset 1px 1px 3px #3a3a3a; */
}
.pax-task-status-img-comp div
{
display: inline-block;
position: relative;
vertical-align: top;
border-radius: 50%;
height: 22px;
width: 22px;
background-position: center center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-image: url('/pax/files/images/check-green.svg');
}
.pax-task-status-img-comp
{
display: inline-block;
position:relative;
vertical-align: top;
height: 32px;
width: 32px;
padding: 5px;
background-color: #ffffff;
border-radius: 50%;
/* box-shadow: inset 1px 1px 3px #3a3a3a; */
}
.pax-task-status-none
{
font-size: 18px;
letter-spacing: 2px;
line-height: 18px;
color: #00cc00;
font-weight: 500;
text-align: center;
margin: 40px 0px;
}
.paxTaskStatus, .pax-task-item
{
padding: 10px;
color: var(--pax-fg-1);
cursor: pointer;
border-radius: 6px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.paxTaskStatus:hover, .pax-task-item:hover
{
color: var(--pax-nav-ctrl-1-fg);
background-color: var(--pax-bg-5);
}
.memo-task-item
{
padding: 10px;
color: #fff;
cursor: pointer;
border-radius: 6px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.memo-task-item:hover
{
font-weight: 500;
background-color: #2a2a2a;
}
.paxTaskStatusText
{
padding-top: 3px;
display: inline-block;
letter-spacing: 1px;
font-weight: 500;
width: calc(100% - 42px);
}
.paxTaskStatus:hover
{
color: var(--pax-nav-ctrl-1-fg);
}
.pax-task-status-img-comp {
    display: inline-block;
    position: relative;
    vertical-align: top;
    height: 20px;
    width: 20px;
    padding: 6px;
    background-color: #ffffff;
    border-radius: 50%;
}
.pax-task-status-img-comp div {
    display: inline-block;
    position: relative;
    vertical-align: top;
    border-radius: 50%;
    background-color: #000000;
    height: 20px;
    width: 20px;
}
.status_nav
{
    position: relative;
    width: 260px;
    height: 20px;
}
.status_dropdown
{
    background: url(/pax/files/images/dropdown-darkgray.svg);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: inline-block;
    position: absolute;
    top: 14px;
    right: 8px;
}
.status_nav_menu
{
    width: 260px;
    z-index: 10001;
    margin: 2px auto;
}
.status_nav_update
{
    position: absolute;
    top: 0px;
    left: 190px;
    width: 78px;
    height: 32px;
    text-align: left;
    padding: 8px 10px;
}
.status_nav_cancel
{
    position: absolute;
    top: 0px;
    left: 278px;
    width: 78px;
    height: 32px;
    text-align: left;
    padding: 8px 10px;
}
.status_nav_menu_opt
{
    background-color: var(--pax-menu-bg);
    cursor: pointer;
    width: 260px;
    height: 18px;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 2px;
    padding: 12px 0px 12px 28px;
}
.status_nav_menu_opt:hover
{
    background-color: var(--pax-menu-opt-hov-bg);
    color: var(--pax-menu-opt-hov-fg);
}
.status_nav_bttn
{
    border-radius: 24px;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 1px;
    color: var(--pax-bttn-fg-1);
    border: 1px solid var(--pax-bttn-bord);
    background-color: var(--pax-bttn-bg);
    cursor: pointer;
    display: inline-block;
    text-align: center;
    padding: 14px 0px;
}

@media screen and (max-width: 600px) {
    .paxTaskStatus
    {
    margin-top: 0px;
    }
    .paxTaskStatusText
    {
    font-size: 12px;
    line-height: 12px;
    }
    .pax-task-status-img-frame, .pax-task-status-img-comp
    {
    margin-right: 8px;
    }
    .pax-progress-frame
    {
    margin: 10px auto;
    }
}