.paginations {
    margin-top: 20px;
    float: right
}

.button-sr {
    width: 160px;
    border-radius: 20px;
    border-color: #0000002b;
    background-color: #fffafa00;
}

.group-button-search .button-sr .title {
    float: left;
    margin-left: 5px;
    color: black;
}

.group-button-search .button-sr .total {
    float: right;
    margin-right: 5px;
}

.active-button-blue {
    background-color: #0075ff24;
}

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

.background-header-table .title {
    color: black;
}

.active-button-orange {
    background-color: #ffa50029;
}

.active-button-orange .title {
    color: orange;
}

.active-button-red {
    background-color: rgba(255, 0, 0, 0.11);
}

.active-button-red .title {
    color: red;
}

.active-button-green {
    background-color: rgba(0, 255, 0, 0.19);
}

.active-button-green .title {
    color: green;
}

.label-file {
    cursor: pointer;
    border: 1px dashed blue;
    border-radius: 3px;
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

#file-name {
    color: blue;
}

#footer-form {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 60px;
    background-color: #fff;
    z-index: 3;
    box-shadow: 0 2px 11px 5px rgba(0, 0, 0, 0.2);
}

.button-csr {
    width: 85px;
    border-radius: 5px;
    border-color: #0000002b;
    background-color: #fffafa00;
}

.button_csrs {
    width: 100px !important;
    border-radius: 5px;
    border-color: #0000002b;
}

.full-width {
    width: 100%;
}

.text-color-black {
    color: black !important;
}

.line {
    width: 1px;
    height: auto;
    background-color: rgba(0, 0, 0, 0.22);
    margin-left: 0px;
    margin-right: 10px;
}

.custom-padding {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.box-order-forward {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 0;
    grid-gap: 12px;
    gap: 12px;
}

.line-order {
    width: 1px;
    height: 100%;
    position: absolute;
    top: 12px;
    left: 12px;
    background: #d8d8d8;
}

.active-status .text-right-order {
    color: #26aa99;
}

.text-right-order {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    color: rgba(0, 0, 0, .54);
    font-size: 14px;
}

.group-icon-order {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
    min-width: 24px;
}

.content-info {
    /*margin-top: 3px;*/
    /*flex-shrink: 0;*/
    color: rgba(0, 0, 0, .8);
    padding-left: 5px;
}

.group-icon-order .icon-order-forward {
    position: relative;
    height: 15px;
    width: 15px;
    z-index: 2;
}

.item-status {
    width: 90px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #0000008f;
}

.item-status-blue {
    width: 90px;
    border: 1px solid deepskyblue;
    border-radius: 15px;
    text-align: center;
    color: deepskyblue;
}

.item-status-orange {
    width: 90px;
    border: 1px solid #ffa500cc;
    border-radius: 15px;
    text-align: center;
    color: #ffa500cc;
}

.item-status-green {
    width: 90px;
    border: 1px solid rgba(0 255 0 / 59%);
    border-radius: 15px;
    text-align: center;
    color: rgba(0 255 0 / 59%);
}

.item-status-red {
    width: 90px;
    border: 1px solid rgba(255 0 0 / 59%);
    border-radius: 15px;
    text-align: center;
    color: rgba(255 0 0 / 59%);
}

.box-request-left {
    background-color: white;
    float: left;
    width: 78%;
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
}

.box-request-right {
    background-color: white;
    float: right;
    width: 20%;
    border-radius: 5px;
    transition: width 0.7s ease-in-out;
}

.icon-hide-show {
    float: right;
    position: relative;
    bottom: 50%;
    left: 7px;
}

.avatar {
    width: 40px;
    height: 40px;
    background-color: #4285F4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Google Sans', sans-serif;
    color: #fff;
    font-weight: 500;
    font-size: 20px;
    text-transform: uppercase;
}


.box-process-detail-left {
    width: 22%;
    float: left;
    background-color: #fff;
    border-radius: 5px
}

.box-process-detail-body {
    width: 53%;
    float: right;
    background-color: #fff;
    border-radius: 5px
}

.box-process-detail-right {
    width: 22%;
    float: right;
    background-color: #fff;
    border-radius: 5px
}

.pull-right {
    float: right !important;
}

.text-red {
    color: red;
}

.icon-pr-excutor-blue {
    width: 36px;
    height: 36px;
    -webkit-mask-image: url('../icon/icon_sprint.svg');
    -moz-mask-image: url('../icon/icon_sprint.svg');
    -ms-mask-image: url('../icon/icon_sprint.svg');
    -o-mask-image: url('../icon/icon_sprint.svg');
    mask-image: url('../icon/icon_sprint.svg');
    -webkit-mask-position: -606px -198px;
    -moz-mask-position: -606px -198px;
    -ms-mask-position: -606px -198px;
    -o-mask-position: -606px -198px;
    mask-position: -606px -198px;
    -webkit-mask-repeat: no-repeat;
    -moz-mask-repeat: no-repeat;
    -ms-mask-repeat: no-repeat;
    -o-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

.icon-pr-excutor-blue {
    background-color: #0c9cdd!important;
}

.icon-pr-circle-minus-custom,.icon-pr-circle-plus {
    width: 20px;
    height: 20px;
    -webkit-mask-image: url('../icon/icon_sprint.svg');
    -moz-mask-image: url('../icon/icon_sprint.svg');
    -ms-mask-image: url('../icon/icon_sprint.svg');
    -o-mask-image: url('../icon/icon_sprint.svg');
    mask-image: url('../icon/icon_sprint.svg');
    -webkit-mask-repeat: no-repeat;
    -moz-mask-repeat: no-repeat;
    -ms-mask-repeat: no-repeat;
    -o-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

.icon-pr-circle-minus-custom {
    -webkit-mask-position: -116px -96px;
    -moz-mask-position: -116px -96px;
    -ms-mask-position: -116px -96px;
    -o-mask-position: -116px -96px;
    mask-position: -116px -96px;
    background-color: #f75010!important;
}

.icon-pr-circle-plus-custom {
    width: 20px;
    height: 20px;
    -webkit-mask-image: url('../icon/icon_sprint.svg');
    -moz-mask-image: url('../icon/icon_sprint.svg');
    -ms-mask-image: url('../icon/icon_sprint.svg');
    -o-mask-image: url('../icon/icon_sprint.svg');
    mask-image: url('../icon/icon_sprint.svg');
    -webkit-mask-position: -96px -96px;
    -moz-mask-position: -96px -96px;
    -ms-mask-position: -96px -96px;
    -o-mask-position: -96px -96px;
    mask-position: -96px -96px;
    -webkit-mask-repeat: no-repeat;
    -moz-mask-repeat: no-repeat;
    -ms-mask-repeat: no-repeat;
    -o-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: #0c9cdd!important
}

.icon-single-line {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url('../icon/icon_sprint.svg');
    -moz-mask-image: url('../icon/icon_sprint.svg');
    -ms-mask-image: url('../icon/icon_sprint.svg');
    -o-mask-image: url('../icon/icon_sprint.svg');
    mask-image: url('../icon/icon_sprint.svg');
    -webkit-mask-repeat: no-repeat;
    -moz-mask-repeat: no-repeat;
    -ms-mask-repeat: no-repeat;
    -o-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: #65696e!important;
    -webkit-mask-position: -24px -48px;
}

.icon-pr-multi-line {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url('../icon/icon_sprint.svg');
    -moz-mask-image: url('../icon/icon_sprint.svg');
    -ms-mask-image: url('../icon/icon_sprint.svg');
    -o-mask-image: url('../icon/icon_sprint.svg');
    mask-image: url('../icon/icon_sprint.svg');
    -webkit-mask-repeat: no-repeat;
    -moz-mask-repeat: no-repeat;
    -ms-mask-repeat: no-repeat;
    -o-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: #686c7b!important;
    -webkit-mask-position: -577px -126px;
    -moz-mask-position: -577px -126px;
    -ms-mask-position: -577px -126px;
    -o-mask-position: -577px -126px;
    mask-position: -577px -126px
}

.icon-pr-pick-value {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url('../icon/icon_sprint.svg');
    -moz-mask-image: url('../icon/icon_sprint.svg');
    -ms-mask-image: url('../icon/icon_sprint.svg');
    -o-mask-image: url('../icon/icon_sprint.svg');
    mask-image: url('../icon/icon_sprint.svg');
    -webkit-mask-repeat: no-repeat;
    -moz-mask-repeat: no-repeat;
    -ms-mask-repeat: no-repeat;
    -o-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: #686c7b!important;
    -webkit-mask-position: -553px -126px;
    -moz-mask-position: -553px -126px;
    -ms-mask-position: -553px -126px;
    -o-mask-position: -553px -126px;
    mask-position: -553px -126px
}

.icon-pr-date-hour {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url('../icon/icon_sprint.svg');
    -moz-mask-image: url('../icon/icon_sprint.svg');
    -ms-mask-image: url('../icon/icon_sprint.svg');
    -o-mask-image: url('../icon/icon_sprint.svg');
    mask-image: url('../icon/icon_sprint.svg');
    -webkit-mask-repeat: no-repeat;
    -moz-mask-repeat: no-repeat;
    -ms-mask-repeat: no-repeat;
    -o-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: #686c7b!important;
    -webkit-mask-position: -505px -126px;
    -moz-mask-position: -505px -126px;
    -ms-mask-position: -505px -126px;
    -o-mask-position: -505px -126px;
    mask-position: -505px -126px
}

.icon-pr-empty-step {
    width: 306px!important;
    height: 220px!important;
    background: url('../icon/empty.svg') -846px 0 no-repeat!important
}

.icon-edit {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url('../icon/icon_sprint.svg');
    -moz-mask-image: url('../icon/icon_sprint.svg');
    -ms-mask-image: url('../icon/icon_sprint.svg');
    -o-mask-image: url('../icon/icon_sprint.svg');
    mask-image: url('../icon/icon_sprint.svg');
    -webkit-mask-repeat: no-repeat;
    -moz-mask-repeat: no-repeat;
    -ms-mask-repeat: no-repeat;
    -o-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: -240px 0;
    -moz-mask-position: -240px 0;
    -ms-mask-position: -240px 0;
    -o-mask-position: -240px 0;
    mask-position: -240px 0;
    background-color: #65696e!important
}

.icon-remove {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url('../icon/icon_sprint.svg');
    -moz-mask-image: url('../icon/icon_sprint.svg');
    -ms-mask-image: url('../icon/icon_sprint.svg');
    -o-mask-image: url('../icon/icon_sprint.svg');
    mask-image: url('../icon/icon_sprint.svg');
    -webkit-mask-repeat: no-repeat;
    -moz-mask-repeat: no-repeat;
    -ms-mask-repeat: no-repeat;
    -o-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: -264px 0;
    -moz-mask-position: -264px 0;
    -ms-mask-position: -264px 0;
    -o-mask-position: -264px 0;
    mask-position: -264px 0;
    background-color: #de1e1e!important
}

.d-flex {
    display: flex;
}

.pdl-10 {
    padding-left: 10px;
}

.pdb-10 {
    padding-bottom: 10px;
}

/*.h-100 {*/
/*    height: 100%;*/
/*}*/

.item-control {
    height: 40px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: move;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    border: 1px solid #fff;
    -webkit-user-select: none;
    user-select: none;
}

.item-control>.title {
    margin-left: 10px;
}

.click-flowchart {
    cursor: pointer;
}

#box-container {
    width: 100%;
    height: 450px;
    border: 1px solid black;
    position: relative;
    overflow: hidden;
    cursor: all-scroll;
}

#move-dot {
    position: absolute;
}

.icon-pr-box-one {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url('../icon/icon_sprint.svg');
    -moz-mask-image: url('../icon/icon_sprint.svg');
    -ms-mask-image: url('../icon/icon_sprint.svg');
    -o-mask-image: url('../icon/icon_sprint.svg');
    mask-image: url('../icon/icon_sprint.svg');
    -webkit-mask-repeat: no-repeat;
    -moz-mask-repeat: no-repeat;
    -ms-mask-repeat: no-repeat;
    -o-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: -481px -126px;
    background-color: #686c7b!important;
}

.icon-pr-box-plus-left {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url('../icon/icon_sprint.svg');
    -moz-mask-image: url('../icon/icon_sprint.svg');
    -ms-mask-image: url('../icon/icon_sprint.svg');
    -o-mask-image: url('../icon/icon_sprint.svg');
    mask-image: url('../icon/icon_sprint.svg');
    -webkit-mask-repeat: no-repeat;
    -moz-mask-repeat: no-repeat;
    -ms-mask-repeat: no-repeat;
    -o-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: #686c7b!important;
    -webkit-mask-position: -337px -125px;
}

.icon-pr-very-small-edit {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url('../icon/icon_sprint.svg');
    -moz-mask-image: url('../icon/icon_sprint.svg');
    -ms-mask-image: url('../icon/icon_sprint.svg');
    -o-mask-image: url('../icon/icon_sprint.svg');
    mask-image: url('../icon/icon_sprint.svg');
    -webkit-mask-repeat: no-repeat;
    -moz-mask-repeat: no-repeat;
    -ms-mask-repeat: no-repeat;
    -o-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: #686c7b !important;
    -webkit-mask-position: -649px -126px;
}

.step-item-detail {
    width: 97%;
}

.date-form {
    width: 97%;
}