/*Default*/

@media (min-width: 768px) {

    body {
        padding-top: 60px;
        line-height: 1.8;
        background: #f6f6f6;
    }

    #sidecontrol {
        align-items: center;
        display: flex;
    }

    .sidebar-toggle {
        width: 50px;
        height: 45px;
        background: #343A40;
        text-align: center;
        float: left;
        vertical-align: middle;
        cursor: pointer;

        -webkit-transition: all 0.3s cubic-bezier(.65,.05,.36,1);
        -moz-transition: all 0.3s cubic-bezier(.65,.05,.36,1);
        -o-transition: all 0.3s cubic-bezier(.65,.05,.36,1);
        transition: all 0.3s cubic-bezier(.65,.05,.36,1);
    }

    .sidebar-toggle-hide {
        margin-left: -66px;
    }

    .sidebar-toggle:hover {
        background: #5A5A5A;
    }

    .sidebar-toggle i {
        font-size: 18px;
        color: white;
        line-height: 45px;
        display: block;
    }

    .sb-collapsed {
        display: block;
        margin-left: -16.666667%; /* same width as sidebar */
    }

    .noGlow:focus {
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .dropdown-custom .custom-trigger {
        width: 100%;
        background: #FFFFFF;
        font-size: 14px;
        line-height: 1.5;
        display: block;
        padding: 0.375rem 0.75rem;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        cursor: pointer;
        transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    }

    .dropdown-custom .open .custom-trigger {
        border: 1px solid #80BDFF;
    }

    .dropdown-custom .dropdown-menu {
        font-size: 14px;
    }

    .dropdown-custom .dropdown-menu > li > a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: 400;
        line-height: 1.428571429;
        color: #333;
        white-space: nowrap;
        cursor: pointer;
    }

    .dropdown-custom .dropdown-menu > li > a:hover {
        background: #F5F5F5;
        text-decoration: none;
    }

    .dropdown-custom .dropdown-menu > li > a .glyphicon-ok:before {
        content: "\f046";
        font-family: FontAwesome;
    }

    .dropdown-custom .dropdown-menu > li > a .glyphicon-remove:before {
        content: "\f00d";
        font-family: FontAwesome;
    }
}



@media (min-width: 768px) {

    /*navigation sidebar-toggle*/

    .main-container {
        top: 45px;
        position: absolute;
    }

    /*Sidebar*/

    #sidebar {
        background: #FBFBFB;
        position: fixed;
        top: 45px;
        bottom: 0;
        left: 0;
        padding: 0px 0px 20px 0px;
        /*overflow-x: auto;
        overflow-y: auto;*/
        border-right: 1px solid #CCCCCC;
        z-index: 1000;
        -webkit-transition: all 0.3s cubic-bezier(.65,.05,.36,1);
        -moz-transition: all 0.3s cubic-bezier(.65,.05,.36,1);
        -o-transition: all 0.3s cubic-bezier(.65,.05,.36,1);
        transition: all 0.3s cubic-bezier(.65,.05,.36,1);
    }

    #repo-container {
        height: 100%;
        width: 100%;
        display: flex;
        position: absolute;
        flex-direction: column;
    }

    #repo-container #head {
        flex-shrink: 0;
    }

    #repo-container #head #searchbar input {
        font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
    }

    #repo-container #head #searchbar .input-group {
        width: 100%;
    }

    #repo-container #head #searchbar .input-group input[type="text"] {
        height: 50px;
        font-size: 15px;
        font-family: FontAwesome, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        color: #000 !important;
        background-color: #EFEFEF !important;
        border: none !important;
        border-radius: 0px;
        outline: none;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }

    #repo-container #head #searchbar .form-control::placeholder {
        color: #000;
        opacity: 0.5;
    }

    #repo-container #head #control {
        padding: 5px 10px;
        border-bottom: 1px solid #CCCCCC;
        height: 80px;
        position: relative;
    }

    #repo-container #head #control #pagetitle {
        display: flex;
        position: absolute;
        left: 0;
        bottom: 0;
        margin-bottom: 15px;
        margin-left: 15px;
    }

    #repo-container #head #control #pagetitle #rp-icon {
        font-size: 25px;
        justify-content: center;
        flex-direction: column;
        display: flex;
        margin-right: 10px;
    }

    #repo-container #head #control #pagetitle #rp-text {
        line-height: 16px;
    }

    #repo-container #head #control #pagetitle .title {
        font-size: 20px;
    }

    #repo-container #head #control #pagetitle .desc {
        font-size: 14px;
    }

    #repo-container #head #control #update_btn {
        position: absolute;
        bottom: 0;
        right: 0;
        margin-bottom: 15px;
        margin-right: 15px;
    }

    #repo-container #content {
        display: grid;
        overflow: auto;
        border-top: 1px solid #CCCCCC;
    }

    #repo-container #update-detail {
        bottom: 0;
        height: 40px;
        width: 100%;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
        color: white;
        position: absolute;
        background: #484848;
        padding: 5px 15px;
    }

    /*Main*/
    #main {
        position: fixed;
        top: 45px;
        bottom: 0;
        right: 0;
        padding: 0;
        -webkit-transition: all 0.3s cubic-bezier(.65,.05,.36,1);
        -moz-transition: all 0.3s cubic-bezier(.65,.05,.36,1);
        -o-transition: all 0.3s cubic-bezier(.65,.05,.36,1);
        transition: all 0.3s cubic-bezier(.65,.05,.36,1);
    }
    
}

@media (min-width: 768px) {

    #jobmanager {
        display: contents;
    }

    #jobmanager .header .container-fluid {
        padding: 0;
    }

    #jobmanager .header .row {
        height: 80px;
        margin: 0;
    }

    #jobmanager .header .section {
        padding: 0;
        background: #FFF;
        border-bottom: 1px solid #E0E0E0;
    }

    #jobmanager .header .section.navs {
        padding: 0;
        background: #FFF;
        border-bottom: none;
    }

    #jobmanager .header #titlepage {
        height: 100%;
        width: 170px;
        margin-left: 40px;
        position: relative;
    }

    #jobmanager .header #content {
        display: flex;
        position: absolute;
        left: 0;
        bottom: 0;
        margin-bottom: 15px;
    }

    #jobmanager .header #content #jm-icon {
        font-size: 25px;
        justify-content: center;
        flex-direction: column;
        display: flex;
        margin-right: 10px;
    }

    #jobmanager .header #content #jm-text {
        line-height: 16px;
    }

    #jobmanager .header #content .title {
        font-size: 20px;
    }

    #jobmanager .header #content .desc {
        font-size: 14px;
    }

    #jobmanager .header #navigation {
        position: relative;
        width: 333px;
        height: 100%;
        background: #FFF;
    }

    #jobmanager .header #navigation nav {
        background: #FFF;
        border-bottom: 1px solid #ddd;
        position: absolute;
        bottom: 0;
    }

    #jobmanager .header #navigation nav .nav-tabs {
        border-bottom: none;
    }

    #jobmanager .header #navigation nav #nav-tab .nav-item {
        font-size: 14px;
        color: black;
    }
    
    #jobmanager .header #navigation nav #nav-tab .nav-item.active {
        background: #F8F8F8;
        border-bottom: none;
    }

    #jobmanager .header #filter {
        font-size: 13px;
        display: flex;
        position: absolute;
        right: 0;
        bottom: 0;
        margin-bottom: 15px;
        margin-right: 30px;
    }

    #jobmanager .header #filter .item {
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-right: 15px;
    }

    #jobmanager .header #filter #viewOption .custom-trigger {
        width: 100%;
        background: #FFFFFF;
        font-size: 1rem;
        line-height: 1.5;
        display: block;
        padding: 0.375rem 0.75rem;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        cursor: pointer;
        transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    }

    #jobmanager .header #filter #viewOption .open .custom-trigger {
        border: 1px solid #80BDFF;
    }
    
    #jobmanager .header #filter #viewOption .custom-trigger span:last-child .last-comma {
        display: none;
    }

    #jobmanager .header #filter #viewOption .dropdown-menu {
        font-size: 14px;
        right: 0;
        left: auto;
    }

    #jobmanager .header #filter #viewOption .dropdown-menu > li > a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: 400;
        line-height: 1.428571429;
        color: #333;
        white-space: nowrap;
        cursor: pointer;
    }

    #jobmanager .header #filter #viewOption .dropdown-menu > li > a:hover {
        background: #F5F5F5;
        text-decoration: none;
    }

    #jobmanager .header #filter #viewOption .dropdown-menu > li > a .glyphicon-ok:before {
        content: "\f046";
        font-family: FontAwesome;
    }

    #jobmanager .header #filter #viewOption .dropdown-menu > li > a .glyphicon-remove:before {
        content: "\f00d";
        font-family: FontAwesome;
    }

    #jobmanager .header #filter #searchbar input {
        width: 170px;
        border-radius: 0.25rem;
    }

    .btn-secondary.dropdown-toggle:focus {
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    #jobmanager #main-content #joblistprocess {
        height: 100%;
        background: #F8F8F8;
    }

    /*header*/
    #jobmanager #main-content #joblistprocess #jobheader {
        padding: 15px 70px 5px 40px;
    }

    #jobmanager #main-content #joblistprocess #jobheader .group-item {
        display: flex;
        padding: 0px;
    }

    #jobmanager #main-content #joblistprocess #jobheader .group-item.jobdetail {
        padding-left: 20px;
    }

    #jobmanager #main-content #joblistprocess #jobheader .item {
        font-size: 12px;
        text-align: left;
        padding: 0;
    }

    #jobmanager #main-content #joblistprocess #jobheader .item.id {
        width: 100px;
    }

    #jobmanager #main-content #joblistprocess #jobheader .item.upldr {
        width: 100%;
        margin-right: 10px;
    }

    #jobmanager #main-content #joblistprocess #jobheader .item.rho {
        width: 100px;
        text-align: center;
        margin-right: 15px;
    }

    #jobmanager #main-content #joblistprocess #jobheader .item.desc {
        width: 100%;
        margin-right: 10px;
    }

    #jobmanager #main-content #joblistprocess #jobheader .item.date {
        width: 170px;
        text-align: center;
        margin-right: 15px;
    }

    #jobmanager #main-content #joblistprocess #jobheader .item.prgrs {
        padding-right: 25px;
    }

    #jobmanager #main-content #joblistprocess #jobheader .group-item .jobstat {
        display: flex;
        width: 100%;
    }

    #jobmanager #main-content #joblistprocess #jobheader .item.stat {
        width: 33.33%;
        padding-left: 10px;
    }

    #jobmanager #main-content #joblistprocess #jobheader .item.action {
        width: 100px;
        text-align: center;
    }

    /*items*/
    #jobmanager #main-content #joblistprocess #jobs {
        height: calc(100% - 124px);
        width: 100%;
        position: absolute;
    }

    #jobmanager #main-content #joblistprocess #jobs #jobgroup {
        height: 100%;
        position: relative;
        overflow: auto;
    }

    #jobmanager #main-content #joblistprocess #jobs ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #jobmanager #main-content #joblistprocess #jobs ul li:last-child .jobitem {
        padding-bottom: 30px;
    }

    #jobmanager #main-content #joblistprocess #jobs #forfinalize .finalizeCount {
        font-size: 14px;
        margin-left: 40px;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content {
        height: 55px;
        background: #FFF;
        margin: 5px 55px 5px 25px;
        border: 1px solid #CED4DA;
        border-radius: 5px;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .group-item {
        display: flex;
        padding: 0px;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item {
        font-size: 14px;
        text-align: left;
        line-height: 17px;
        padding: 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item .text-muted {
        font-size: 12px;
        max-width: 120px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item .text-muted.statword {
        font-size: 12px;
        max-width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .group-item.jobdetail {
        padding: 5px 0px 5px 20px;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.id {
        width: 100px;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.upldr {
        width: 100%;
        margin-right: 10px;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.rho {
        width: 100px;
        margin-right: 15px;
        text-align: center;
        font-size: 13px;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .group-item.filedetail {
        padding: 5px 0px;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.desc {
        width: 100%;
        margin-right: 10px;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item span {
        display: block;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.date {
        font-size: 13px;
        width: 170px;
        text-align: center;
        margin-right: 15px;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.prgrs {
        padding-right: 25px;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.prgrs .progress {
        height: 15px;
        margin: 3px 0px 3px 0px;
    }
    
    #jobmanager #main-content #joblistprocess #jobitem-content .group-item .jobstat {
        display: flex;
        width: 100%;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.stat {
        width: 33.33%;
        padding-left: 10px;
        cursor: pointer;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.stat:hover {
        background: #DDDDDD!important
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.stat.total {
        background: #F6F6F6
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.stat.error {
        background: #F6F6F6
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.action {
        width: 100px;
        background: #F6F6F6;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.action .dropdown {
        margin: 0 auto;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.action .dropdown-menu {
        min-width: 6rem;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.action .dropdown .btn {
        background: #FFF;
        border: #FFF;
        border-radius: 20px;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.action .dropdown .btn:hover {
        background: #F5F5F5;
        border: 1px solid #eaeaea;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.action .dropdown .btn:focus {
        background: #F5F5F5;
        border: 1px solid #eaeaea;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    #jobmanager #main-content #joblistprocess #jobitem-content .item.action .dropdown a::after {
        display: none;
    }

    #jobmanager #main-content #joblistfixes .button {
        -moz-appearance: button;
        /* Firefox */
        -webkit-appearance: button;
        /* Safari and Chrome */
        padding: 10px;
        margin: 10px;
        width: 70px;
    }

    #jobmanager #main-content #joblistfixes .drop-box {
        background: #EFEFEF;
        border: 3px dashed #DDD;
        height: 70px;
        text-align: center;
        margin: 25px 55px 25px 25px;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    #jobmanager #main-content #joblistfixes .dragover {
        border: 3px dashed #2561CB;
    }

    /*header info*/
    #jobmanager #main-content #joblistinfo #jobheader {
        height: 45px;
        padding: 15px 70px 5px 40px;
    }

    #jobmanager #main-content #joblistinfo #jobheader .group-item {
        display: flex;
        padding: 0px;
    }

    #jobmanager #main-content #joblistinfo #jobheader .group-item.jobdetail {
        padding-left: 20px;
    }

    #jobmanager #main-content #joblistinfo #jobheader .item {
        font-size: 12px;
        text-align: left;
        padding: 0;
    }

    #jobmanager #main-content #joblistinfo #jobheader .item.id {
        width: 100px;
    }

    #jobmanager #main-content #joblistinfo #jobheader .item.upldr {
        width: 100%;
        margin-right: 10px;
    }

    #jobmanager #main-content #joblistinfo #jobheader .item.date {
        width: 170px;
        text-align: center;
        margin-right: 15px;
    }

    #jobmanager #main-content #joblistinfo #jobheader .item.rho {
        width: 100px;
        text-align: center;
        margin-right: 15px;
    }

    #jobmanager #main-content #joblistinfo #jobheader .item.desc {
        width: 100%;
        margin-right: 10px;
    }

    #jobmanager #main-content #joblistinfo #jobheader .item.stat {
        text-align: center;
    }

    #jobmanager #main-content #joblistinfo #jobheader .item.msg {
        width: 100%;
        padding-left: 10px;
    }

    #jobmanager #main-content #joblistinfo #jobheader .item.action {
        width: 100px;
        text-align: center;
    }

        /*items info*/
    #jobmanager #main-content #joblistinfo #jobs {
        height: calc(100% - 124px);
        width: 100%;
        position: absolute;
    }

    #jobmanager #main-content #joblistinfo #jobs ul {
        overflow: auto;
        height: 100%;
        position: relative;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #jobmanager #main-content #joblistinfo #jobs ul li:last-child .jobitem {
        padding-bottom: 30px;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content {
        height: 55px;
        background: #FFF;
        margin: 5px 55px 5px 25px;
        border: 1px solid #CED4DA;
        border-radius: 5px;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .group-item {
        display: flex;
        padding: 0px;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .item {
        font-size: 14px;
        text-align: left;
        line-height: 17px;
        padding: 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .item .text-muted {
        font-size: 12px;
        max-width: 300px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .group-item.jobdetail {
        padding: 5px 0px 5px 20px;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .item.id {
        width: 100px;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .item.upldr {
        width: 100%;
        margin-right: 10px;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .group-item.filedetail {
        padding: 5px 0px;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .item.date {
        font-size: 13px;
        width: 170px;
        text-align: center;
        margin-right: 15px;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .item.rho {
        width: 100px;
        margin-right: 15px;
        text-align: center;
        font-size: 13px;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .item.desc {
        width: 100%;
        margin-right: 10px;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .item span {
        display: block;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .item.stat {
        display: flex;
        justify-content: center;
        flex-direction: row;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .item.stat .type {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .item.stat .type .badge {
        font-size: 12px;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .item.stat .type span {
        float: left;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .item.stat .type .text {
        font-size: 13px;
        margin-left: 15px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 90%;
    }
    
    #jobmanager #main-content #joblistinfo #jobitem-content .item.action {
        width: 100px;
        text-align: center;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .item.action .deletebtn .btn {
        background: #FFF;
        border: #FFF;
        border-radius: 20px;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .item.action .deletebtn .btn:hover {
        background: #F5F5F5;
        border: 1px solid #eaeaea;
    }

    #jobmanager #main-content #joblistinfo #jobitem-content .item.action .deletebtn .btn:focus {
        background: #F5F5F5;
        border: 1px solid #eaeaea;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    /*correction header info*/
    #jobmanager #main-content #joblistfixes #correctionheader {
        padding: 15px 70px 5px 40px;
    }

    #jobmanager #main-content #joblistfixes #correctionheader .group-item {
        display: flex;
        padding: 0px;
    }

    /*#jobmanager #main-content #joblistfixes #correctionheader .group-item.jobdetail {
        padding-left: 20px;
    }*/

    #jobmanager #main-content #joblistfixes #correctionheader .item {
        font-size: 12px;
        text-align: left;
        padding: 0;
    }

    #jobmanager #main-content #joblistfixes #correctionheader .item.corid {
        width: 50%;
        padding-left: 20px;
    }

    #jobmanager #main-content #joblistfixes #correctionheader .item.id {
        width: 50%;
        margin-right: 10px;
    }

    #jobmanager #main-content #joblistfixes #correctionheader .item.filename {
        margin-right: 15px;
    }

    #jobmanager #main-content #joblistfixes #correctionheader .item.stat {
        text-align: left;
        margin-right: 15px;
    }

    #jobmanager #main-content #joblistfixes #correctionheader .item.info {
        width: 100%;
        padding-left: 10px;
    }

    #jobmanager #main-content #joblistfixes #correctionheader .item.action {
        width: 100px;
        text-align: center;
    }

    /*Correction*/
    #jobmanager #main-content #joblistfixes #correction {
        height: calc(100% - 241.6px);
        width: 100%;
        position: absolute;
    }

    #jobmanager #main-content #joblistfixes #correction #correctionGroup {
        height: 100%;
        position: relative;
        overflow: auto;
    }

    #jobmanager #main-content #joblistfixes #correctionGroup #uploadList ul li:last-child {
        margin-bottom: 15px;
    }

    #jobmanager #main-content #joblistfixes #correctionGroup ul {
        overflow: auto;
        height: 100%;
        position: relative;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #jobmanager #main-content #joblistfixes #correctionGroup ul li:last-child .correctionItem {
        padding-bottom: 30px;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content {
        height: 55px;
        background: #FFF;
        margin: 5px 55px 5px 25px;
        border: 1px solid #CED4DA;
        border-radius: 5px;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .group-item {
        display: flex;
        padding: 0px;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item {
        font-size: 14px;
        text-align: left;
        line-height: 17px;
        padding: 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.corid {
        width: 50%;
        padding-left: 20px;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.id {
        width: 50%;
        margin-right: 10px;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.filename {
        width: 100%;
        margin-right: 15px;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.stat {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        margin-right: 15px;
        padding-left: 6px;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.stat .type {
        font-size: 15px;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.stat .type.upload {
        width: 100%
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.stat .type span {
        float: left;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.info {
        margin-right: 15px;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item .cor_info {
        display: flex;
        justify-content: flex-end;
        flex-direction: row;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item .cor_info a {
        font-size: 13px;
    }
    
    #jobmanager #main-content #joblistfixes #correctionItem-content .item.action {
        width: 100px;
        text-align: center;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.action .dropdown {
        margin: 0 auto;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.action .dropdown-menu {
        min-width: 6rem;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.action .dropdown .btn {
        background: #FFF;
        border: #FFF;
        border-radius: 20px;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.action .dropdown .btn:hover {
        background: #F5F5F5;
        border: 1px solid #eaeaea;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.action .dropdown .btn:focus {
        background: #F5F5F5;
        border: 1px solid #eaeaea;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.action .deletebtn .btn {
        background: #FFF;
        border: #FFF;
        border-radius: 20px;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.action .deletebtn .btn:hover {
        background: #F5F5F5;
        border: 1px solid #eaeaea;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.action .deletebtn .btn:focus {
        background: #F5F5F5;
        border: 1px solid #eaeaea;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    #jobmanager #main-content #joblistfixes #correctionItem-content .item.action .dropdown a::after {
        display: none;
    }

}

@media (min-width: 768px) {

    #mapping {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    #mapping #main-header {
        height: 80px;
        background: #FFF;
        border-top: 1px solid #E0E0E0;
        border-bottom: 1px solid #E0E0E0;
    }

    #mapping #main-header .container-fluid {
        height: inherit
    }

    #mapping #main-header .container-fluid .row {
        height: inherit
    }

    #mapping #main-header .pull-left {
        height: 100%;
        display: flex;
        padding: 0px 0px 0px 20px;
    }

    #mapping #main-header .pull-left div {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    #mapping #main-header #description {
        display: flex;
        height: 100%;
    }

    #mapping #main-header #description div {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }

    #mapping #main-header #description #dspNameYearMonth {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }

    #mapping #main-header #description .reportdate {
        font-size: 14px;
    }

    #mapping #main-header .pull-right {
        height: 100%;
        display: flex;
        padding: 0px 20px 0px 0px;
        position: absolute;
        right: 0;
    }

    #mapping #main-header .pull-right #navigationBtn {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    #mapping #main-header .pull-right #navigationBtn .backBtn {
        margin-right: 10px;
    }
    

    /*Content*/

    #mapping #main-content {
        height: 100%;
        background: #FFF;
    }

    /*config-header*/

    #mapping #main-content #job-config {
        background: #FFF;
        position: absolute;
        top: 80px;
        bottom: 0;
        left: 0;
        right: 0;
    }

    #mapping #main-content #job-config .header .col-matching {
        width: 450px;
    }

    #mapping #main-content #job-config .header .settings {
        width: 350px;
    }

    #mapping #main-content #job-config .header .item {
        color: #0c467e;
        font-size: 14px;
        font-weight: bold;
        padding: 10px 20px 5px 20px;
        border-left: 1px solid #CED4DA;
    }

    #mapping #main-content #job-config .header .item .icon {
        font-size: 15px;
    }

    #mapping #main-content #job-config .content {
        position: absolute;
        top: 40px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0px;
    }

    #mapping #main-content #job-config .content .col-item {
        padding: 0px;
    }

    /*Preview*/

    #mapping #main-content #job-config .content #preview {
        padding: 0px;
        white-space: nowrap;
        height: 100%;
        overflow: auto;
    }

    #mapping #main-content #job-config .content #preview #previewFullCon {
        height: 100%;
        width: 100%;
        display: table;
    }

    #mapping #main-content #job-config .content #preview #previewFullCon #previewOption {
        display: table-row
    }

    #mapping #main-content #job-config .content #preview #previewFullCon #options {
        padding: 0 20px 20px 20px;
    }

    #mapping #main-content #job-config .content #preview #previewFullCon #options .row {
        margin: 0;
    }

    #mapping #main-content #job-config .content #preview #previewFullCon #options .row .col {
        padding: 0 20px 0 0;
    }

    #mapping #main-content #job-config .content #preview #previewFullCon #options label {
        font-size: 13px;
        font-weight: normal;
        color: #000;
    }

    #mapping #main-content #job-config .content #preview #previewFullCon #options #separatorSelectstr {
        text-align: center;
    }

    #mapping #main-content #job-config .content #preview #previewFullCon #options #refreshtbl {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    #mapping #main-content #job-config .content #preview #previewMomCon {
        height: 100%;
        display: table-row
    }

    #mapping #main-content #job-config .content #preview #previewMomCon #previewTopCon {
        height: 50%;
        position: relative;
    }

    #mapping #main-content #job-config .content #preview #previewMomCon #previewBottomCon {
        height: 50%;
        position: relative;
    }

    #mapping #main-content #job-config .content #preview .viewTitleMom {
        width: 100%;
        height: 30px;
        padding: 0 20px;
    }

    #mapping #main-content #job-config .content #preview .viewTitleMom .viewTitleCon {
        width: 100%;         
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    #mapping #main-content #job-config .content #preview .viewTitleMom .viewTitleCon .viewTitle {
        color: #0c467e;
        font-size: 14px;
        font-weight: bold;
    }

    #mapping #main-content #job-config .content #preview .outer-container {
        padding: 0 20px 20px 20px;
        width: 100%;
        height: calc(100% - 30px);
        position: absolute;
    }

    #mapping #main-content #job-config .content #preview .outer-container .tableTitle {
        font-size: 14px;
        font-weight: bold;
        margin-top: 20px;
    }

    #mapping #main-content #job-config .content #preview .outer-container .pagination {
        margin: 0;
    }

    #mapping #main-content #job-config .content #preview .outer-container .pagination i {
        color: black;
    }

    #mapping #main-content #job-config .content #preview .inner-container {
        height: 100%;
        width: 100%;
        white-space: nowrap;
        overflow: auto;
    }

    #mapping #main-content #job-config .content #preview table {
       table-layout: fixed;
       border-collapse: collapse;
     }

    #mapping #main-content #job-config .content #preview table th {
        position: relative;
        min-width: 25px;
    }

    #mapping #main-content #job-config .content #preview table {
        border-collapse: collapse;
    }

    #mapping #main-content #job-config .content #preview table th {
        font-weight: normal;
        text-transform: uppercase;
        min-width: 10px;
        background-color: #f8f8f8;
    }

    #mapping #main-content #job-config .content #preview table th, table td {
        font-size: 12px;
        padding: 0.3rem;
        font-weight: normal;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-right: 15px;
        padding-bottom: 2px;
        border-right: 1px solid rgba(0,0,0,0.05);
        border-top: 1px solid rgba(0,0,0,0.05);
    }

    #mapping #main-content #job-config .content #preview .table-header {
        position: relative;
    }

    #mapping #main-content #job-config .content #preview .table-header .table {
        margin: 0px;
        border-bottom: 1px solid #e9ecef;
    }

    #mapping #main-content #job-config .content #preview .table-header td {
        font-size: 12px;
        padding: 0.3rem;
        padding-right: 20px;
        width: 110px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: none;
    }

    #mapping #main-content #job-config .content #preview .table-body {
        overflow: auto;
    }

    #mapping #main-content #job-config .content #preview .table-body tr {
        border-top: 1px solid #e9ecef;
    }

    #mapping #main-content #job-config .content #preview .table-body td {
        font-size: 12px;
        padding: 0.3rem;
        padding-right: 20px;
        width: 110px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: none;
    }

    /*col-matching*/

    #mapping #main-content #job-config .content #col-matching {
        width: 450px;
    }

    #mapping #main-content #job-config .content #col-matching .rowid {
        text-align: center;
    }

    #mapping #main-content #job-config .content #col-matching #list-group-header {
        width: 432px;
        font-size: 12px;
        border-bottom: 1px solid #CED4DA;
        position: fixed;
        z-index: 2;
        background: white;
    }

    #mapping #main-content #job-config .content #col-matching #list-group-header .item {
        padding: 0.3rem;
        padding-right: 15px;
        padding-left: 15px;
    }

    #mapping #main-content #job-config .content #col-matching #list-group-content {
        height: 100%;
        width: 100%;
        position: absolute;
        overflow: auto;
        border-left: 1px solid #CED4DA;
    }

    #mapping #main-content #job-config .content #col-matching #list-group-content .tblmatch-content {
        width: 432px;
        margin-top: 32px;
    }

    #mapping #main-content #job-config .content #col-matching #list-group-content .tblmatch-content .list-group-item {
        margin-bottom: 0;
        border: none;
        border-bottom: 1px solid rgb(240, 240, 240);
    }

    #mapping #main-content #job-config .content #col-matching #list-group-content .col-item {
        font-size: 12px;
        padding: 5px 0px;
        border-radius: 0;
        border-bottom: 1px solid rgb(240, 240, 240);
    }

    #mapping #main-content #job-config .content #col-matching #list-group-content .col-item .row div {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    #mapping #main-content #job-config .content #col-matching #list-group-content .col-item .row .ro-field span {
        padding-top: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #mapping #main-content #job-config .content #col-matching #list-group-content .col-item .reporting-fields-opt .multiselect-parent {
        position: absolute;
    }

    #mapping #main-content #job-config .content #col-matching #list-group-content .col-item .reporting-fields-opt .custom-trigger {
        width: auto;
        font-size: 12px;
        color: white;
        display: inline-block;
        background: #0C467E;
        padding: 0.2rem 0.75rem;
        border: none;
        border-radius: 20px;
    }

    #mapping #main-content #job-config .content #col-matching #list-group-content .col-item .reporting-fields-opt .custom-trigger.null {
        width: auto;
        font-size: 12px;
        color: white;
        display: inline-block;
        background: #DEDEDE;
        padding: 0.2rem 0.75rem;
        border: none;
        border-radius: 20px;
    }

    #mapping #main-content #job-config .content #col-matching #list-group-content .col-item .reporting-fields-opt .custom-trigger.null i {
        color: #000;
    }

    #mapping #main-content #job-config .content #settings {
        height: 100%;
        width: 350px;
        border-left: 1px solid #CED4DA;
        overflow: auto;
    }

    #mapping #main-content #job-config .content #settings {
        padding: 15px 30px 0px 30px;
    }

    #mapping #main-content #job-config .content #settings .items {
        margin-bottom: 15px;
    }

    #mapping #main-content #job-config .content #settings #price-mul.items i {
        font-size: 13px;
    }

    #mapping #main-content #job-config .content #settings label {
        font-size: 13px;
    }

    #mapping #main-content #job-config .content #settings input {
        font-size: 13px;
    }

    #mapping #main-content #job-config .content #settings .option .multiselect-parent {
        width: 100%;
    }

    #mapping #main-content #job-config .content #settings .option .multiselect-parent div {
        width: 100%;
    }

    #mapping #main-content #job-config .content #settings .option .custom-trigger {
        width: 100%;
        background: #F8F8F8;
    }

    #mapping #main-content #job-config .content #settings .option .custom-trigger.null {
        width: 100%;
        font-size: 13px;
        background: #F8F8F8;
    }

    #mapping #main-content #job-config .content #settings .option .custom-trigger.null i {
        font-size: 13px;
        color: #DC3545;
    }

    #mapping #main-content #job-config .content #settings #iso_a2-opt.option .custom-trigger {
        width: 60px;
        font-size: 13px;
        text-align: center;
        background: #F8F8F8;
        padding: 0.5rem 0.75rem;
        border-radius: 0.25rem 0rem 0rem 0.2rem;
    }

    #mapping #main-content #job-config .content #settings #iso_a2-opt.option .custom-trigger.null {
        width: 60px;
        font-size: 13px;
        text-align: center;
        background: #F8F8F8;
        padding: 0.5rem 0.75rem;
        border-radius: 0.25rem 0rem 0rem 0.2rem;
    }

    #mapping #main-content #job-config .content #settings #currency-opt.option .custom-trigger {
        width: 60px;
        font-size: 13px;
        text-align: center;
        background: #F8F8F8;
        padding: 0.5rem 0.75rem;
        border-radius: 0;
    }

    #mapping #main-content #job-config .content #settings #currency-opt.option .custom-trigger.null {
        width: 60px;
        font-size: 13px;
        text-align: center;
        background: #F8F8F8;
        padding: 0.5rem 0.75rem;
        border-radius: 0;
    }

    #mapping #main-content #job-config .content #settings #unit-price .option .custom-trigger.null i {
        color: #000000;
    }

    #mapping #main-content #job-config .content #settings #unit-price .action {
        cursor: pointer;
    }

    #mapping #main-content #job-config .content #settings #unitprice-list .action {
        cursor: pointer;
    }

    #mapping #main-content #job-config .content #settings .country-item .custom-select {
        border-radius: 0.25rem 0 0 0.25rem;
        border-right: 0;
    }

    #mapping #main-content #job-config .content #settings .currency-item .custom-select {
        border-radius: 0;
        border-right: 0;
    }

    #mapping #main-content #job-config .content #settings #unitprice-list .addBtn {
        border-radius: 0 0.25rem 0.25rem 0;
    }

    #mapping #main-content #job-config .content #settings #unitprice-list .list-group-item {
        font-size: 14px;
        padding: 0px 0px 5px 0px;
        border: none;
    }

    #mapping #main-content #job-config .content #settings #unitprice-list .list-group-item .item {
        float: left;
    }

    #mapping #main-content #job-config .content #settings .country-item.option .custom-trigger {
        width: 76px;
        height: 38px;
        background: #FCFCFC;
        font-size: 14px;
        line-height: 1.5;
        display: block;
        padding: 0.375rem 0.95rem;
        border: 1px solid #ced4da;
        border-right: 0;
        border-radius: 0.25rem 0rem 0rem 0.2rem;
        cursor: auto;
    }

    #mapping #main-content #job-config .content #settings .currency-item.option .custom-trigger {
        width: 82px;
        height: 38px;
        background: #FCFCFC;
        font-size: 14px;
        line-height: 1.5;
        display: block;
        padding: 0.375rem 0.95rem;
        border: 1px solid #ced4da;
        border-right: 0;
        border-radius: 0;
        cursor: auto;
    }

    #mapping #main-content #job-config .content #settings #unitprice-list .list-group-item .readonly {
        background: #FCFCFC;
    }

    #mapping #main-content #job-config .content #settings #unitprice-list .delBtn {
        border-radius: 0 0.25rem 0.25rem 0;
    }

    .rz-handle {
        background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.05) 2px,
        rgba(0, 0, 0, 0.05) 4px
      );
    }

}

/*modal column mapping*/

@media (min-width: 768px) {

    .d-block {
        width: 100%;
        cursor: pointer;
    }

    #mapping .modal-dialog {
        max-width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: 40px;
        overflow-y: initial !important;
    }

    #mapping .modal-content {
        height: 100%;
        padding: 0;
    }

    #mapping .modal-header {
        padding: 10px 0px;
    }

    #mapping .modal-header #file-detail {
        width: 100%;
        margin: 0px 20px;
    }

    #mapping .modal-header #file-detail .details {
        line-height: 20px;
    }

    #mapping .modal-header #file-detail .details.pull-right {
        text-align: right;
    }

    #mapping .label {
        font-size: 13px;
        margin-bottom: 0px;
    }

    #mapping .labelbg {
        font-size: 18px;
    }

    #mapping .modal-body {
        background: #F5F5F5;
        overflow-y: auto;
    }

    #mapping .modal-body .container-fluid {
        height: 100%
    }

    #mapping .modal-body .row {
        height: inherit
    }

    #mapping .modal-body .col-auto {
        padding: 0;
    }
        
    #mapping .modal-body .col {
        padding: 0;
    }

    #mapping .modal-body .group {
        height: 100%;
        color: #424242;
        background: #FFF;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #e9ecef;
        margin-right: 10px;
    }

    /*setting*/

    #mapping .modal-body #setting {
        width: 270px;
    }

    #mapping .modal-body #setting {
    color: #424242;
    background: #FFF;
    padding: 10px 15px 10px 15px;
    border-left: solid 1px #EFEFEF;
    }

    #mapping .modal-body #setting #content {
    margin: 10px 20px 10px 10px;
    }

    #mapping .modal-body #setting #content .item {
        margin-top: 10px;
    }

    #mapping .modal-body #setting #content #rho {
        font-size: 13px;
    }

    #mapping .modal-body #setting #content #unitprice-group #unitprice .input-group-btn .btn {
        cursor: pointer;
    }

    .double-input .form-control {
        font-size: 13px;
        width: 50%;
        border-right-width: 1px;
        border: 1px solid #D9D9D9;
    }

    .double-input .form-control:focus {
        border-right-width: 1px;
        border: 1px solid #80BDFF;
    }

    /*col map*/

    #mapping .modal-body #column-mapping {
        width: 400px;
    }

    #mapping .modal-body #column-mapping #mapping-header {
        margin: 10px 10px 0px 10px;
    }

    #mapping .modal-body #column-mapping #mapping-header .table {
        font-size: 12px;
        margin: 10px 0px 0px 0px;
    }

    #mapping .modal-body #column-mapping #mapping-tbl {
        margin: 0px 10px;
    }

    #mapping .modal-body #column-mapping #mapping-tbl .table {
        font-size: 14px;
    }

    #mapping .modal-body #column-mapping .table tr th {
        padding: 5px;
        vertical-align: middle;
        border-bottom: none;
        text-align: center;
        font-weight: normal;
    }

    #mapping .modal-body #column-mapping .table tr {
        padding: 5px;
        vertical-align: middle;
        border-bottom: none;
    }

    #mapping .modal-body #column-mapping .table tr .col-2 {
        text-align: center;
    }

    #mapping .modal-body #column-mapping .table tr .raw {
        padding: 5px 5px 5px 20px;
        text-align: left;
        vertical-align: middle;
    }

    #mapping .modal-body #column-mapping .table tr td {
        padding: 5px;
        vertical-align: middle;
    }


    #mapping .modal-footer {
        width: 100%;
        display: block;
    }

    #mapping .modal-footer .btn-secondary {
        float: left;
        cursor: pointer;
    }

    #mapping .modal-footer .btn-primary {
        float: right;
        cursor: pointer;
    }

    #mapping .modal-body #preview {
        width: 100%;
        padding: 15px 25px;
    }

    #mapping .modal-body #preview #prv-header {
        line-height: 15px;
        margin: 10px 10px 10px 0px;
    }

    #mapping .modal-body #preview #preview-tbl {
        margin-top: 10px;
        overflow: auto;
    }

    #mapping .modal-body #preview #preview-tbl .table {
        font-size: 12px;
        margin: 0px;
        white-space: nowrap;
    }
}
/*navbar*/

@media (min-width: 768px) {

    .navbar {
        height: 45px;
        flex-flow: row nowrap;
        padding: 0px 16px;
    }

    .navbar-brand {
        padding: 0px;
        margin-left: 16px;
    }

    .navbar-brand img {
        height: 30px;
        display: block;
    }

    .nav-item #userOption .btn {
        height: 45px;
        width: 60px;
        color: #FFF;
        background: none;
        border: 0;
        border-radius: 0;
        cursor: pointer;
    }

    .nav-item #userOption .btn:hover {
        background: #5A5A5A;
        padding: 0px;
    }

    .nav-item #userOption.show .btn {
        background: #5A5A5A;
        padding: 0px;
    }

    .nav-item #userOption .btn:focus {
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .nav-item #userOption .btn .fa-user-o {
        font-size: 17px;
    }

    .nav-item #userOption .dropdown-menu {
        top: 42px;
        position: absolute;
        border-radius: 0;
    }

}

@media (min-width: 768px) {
    .modal-title.modal-popover {
        font-size: 16px;
    }

    .modal-body.modal-popover {
        text-align: left;
        font-size: 13px;
    }

    .modal-body.modal-popover #export .items {
        margin-bottom: 15px;
    }

    .popper,
    .tooltip {
        position: absolute;
        background: #fefefe;
        color: black;
        width: 400px;
        border-radius: 3px;
        box-shadow: 0 0 2px rgba(0,0,0,0.5);
        padding: 10px;
        text-align: center;
        display: none;
    }
    .style5 .tooltip {
        background: #1E252B;
        color: #FFFFFF;
        max-width: 200px;
        width: auto;
        font-size: .8rem;
        padding: .5em 1em;
    }
    .popper .popper__arrow,
    .tooltip .tooltip-arrow {
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
        margin: 5px;
    }

    .tooltip .tooltip-arrow,
    .popper .popper__arrow {
        border-color: #999999;
    }
    .style5 .tooltip .tooltip-arrow {
        border-color: #1E252B;
    }
    .popper[x-placement^="top"],
    .tooltip[x-placement^="top"] {
        margin-bottom: 5px;
    }
    .popper[x-placement^="top"] .popper__arrow,
    .tooltip[x-placement^="top"] .tooltip-arrow {
        border-width: 5px 5px 0 5px;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        bottom: -5px;
        left: calc(50% - 5px);
        margin-top: 0;
        margin-bottom: 0;
    }
    .popper[x-placement^="bottom"],
    .tooltip[x-placement^="bottom"] {
        margin-top: 5px;
    }
    .tooltip[x-placement^="bottom"] .tooltip-arrow,
    .popper[x-placement^="bottom"] .popper__arrow {
        border-width: 0 5px 5px 5px;
        border-left-color: transparent;
        border-right-color: transparent;
        border-top-color: transparent;
        top: -5px;
        left: calc(50% - 5px);
        margin-top: 0;
        margin-bottom: 0;
    }
    .tooltip[x-placement^="right"],
    .popper[x-placement^="right"] {
        margin-left: 5px;
    }
    .popper[x-placement^="right"] .popper__arrow,
    .tooltip[x-placement^="right"] .tooltip-arrow {
        border-width: 5px 5px 5px 0;
        border-left-color: transparent;
        border-top-color: transparent;
        border-bottom-color: transparent;
        left: -5px;
        top: calc(50% - 5px);
        margin-left: 0;
        margin-right: 0;
    }
    .popper[x-placement^="left"],
    .tooltip[x-placement^="left"] {
        margin-right: 5px;
    }
    .popper[x-placement^="left"] .popper__arrow,
    .tooltip[x-placement^="left"] .tooltip-arrow {
        border-width: 5px 0 5px 5px;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        right: -5px;
        top: calc(50% - 5px);
        margin-left: 0;
        margin-right: 0;
    }
}

/*repository*/

@media (min-width: 768px) {
    
    #tree .branch a { /*2nd level*/
        padding: 0px 20px 0px 15px;
        white-space: nowrap;
    }

    #tree .branch .branch a { /*2nd level*/
        padding: 0px 20px 0px 30px;
        white-space: nowrap;
    }

    #tree .branch .branch .branch a { /*3rd level*/
        padding: 0px 20px 0px 45px;
        white-space: nowrap;
    }

    #tree .branch .branch .branch .branch a { /*4th level*/
        padding: 0px 20px 0px 60px;
        white-space: nowrap;
    }

    #tree .twig.parent {
        background: #F5F5F5;
        border-top: 1px solid #CED4DA;
        border-bottom: 1px solid #CED4DA;
    }

    #tree .branch.parent a {
        color: #000;
        font-size: 16px;
        font-style: normal;
        display: block;
        cursor: pointer;
    }

    #tree .branch.son a {
        color: #000;
        font-size: 13px;
        font-style: normal;
        display: block;
        cursor: pointer;
    }

    .branch a:hover {
        text-decoration: none;
        background-color: #eee
    }

    #tree .parent a .folder-icon:before {
        color: #575757;
        content: "\f07c";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
    }

    #tree .parent a.collapsed .folder-icon:before {
        color: #575757;
        content: "\f07b";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
    }

    #tree .son a .folder-icon:before {
        content: "\f07c";
        font-family: 'Font Awesome 5 Free';
        font-weight: 400;
    }

    #tree .son a.collapsed .folder-icon:before {
        content: "\f07b";
        font-family: 'Font Awesome 5 Free';
        font-weight: 400;
    }
}

.page-spinner {
    background-color: rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1052;
}

.page-spinner .page-spinner-content {
    position: absolute;
    top: 50%;
    text-align: center;
    width: 100%;
    height: 48px;
    margin-top: -24px;
}

.page-spinner .page-spinner-content .page-spinner-icon {
    font-size: 48px;
    color: darkblue;
}