@charset "UTF-8";

html, body {
    width: 100%;
    height: 100%;
    word-wrap: break-word;
    /* overflow-y: scroll;*/
    overflow: hidden;
}
.nav-link {
    font-weight: 700;
    color: #4c535d;
}
a:hover {
    color: #4c535d;
}
html {
    min-height: 100%;
}
.big-checkbox {
    height: 30px;
    width: 30px;
}
body {
    margin: 0;
    padding: 0;
    padding-top: 63px;
    padding-bottom: 20px;
    font-family: 'Roboto', sans-serif;
    background-color: #f5f3f4;
    color: #4c535d;
    overflow-y: auto;
    font-size: 14px;
}

.footer {
    background-color: #00b9e5;
    color: #FFF;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 20px; /* Set the fixed height of the footer here */
}

/*.cornerstone-top-bar {
    position: fixed;
    width: 100%;
    height: 63px;
    top: 0;
}*/

.globalDivContents {
    background-color: #f5f3f4;
    position: fixed;
    height: 100%;
    top: 63px;
    width: 100%;
    overflow: auto;
    min-height: 100%;
    padding-bottom: 63px;
}

.bodyOverflowChange {
    overflow: hidden;
}

.clearfix {
    clear: both;
}

/* H1 TO H6 */
h1 {
    font-size: 48px;
    font-weight: 700;
    margin: 0;
}

h2 {
    font-size: 36px;
    font-weight: 700;
}

h3 {
    font-size: 30px;
    font-weight: 700;
}

h4 {
    font-size: 24px;
    font-weight: 700;
}

h5 {
    font-size: 16px;
    font-weight: 700;
}

h6 {
    font-size: 12px;
    font-weight: 500;
}

.strong {
    font-weight: 700;
}

.font-italic {
    font-style: italic;
}

.text-logo {
    font-size: 48px;
    font-weight: 900;
    margin: 0;
    text-transform: uppercase;
    margin-left: 10px;
}

.image-logo {
    max-height: 50px;
    margin: 0;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Watermark */

.watermark {
    opacity: 0.5;
    color: RED;
    font-weight: 700;
    font-size: 30px;
    position: absolute;
    text-align: center;
    width: 100%;
    top: calc(50% - 15px);
    transform: rotate(-30deg);
}

/* LINKS E BOTÕES */
.linkSimple {
    color: #00b9e5;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

    .linkSimple:hover {
        color: #00b9e5;
        font-weight: 700;
        text-decoration: none;
    }

    .linkSimple:active {
        color: #00b9e5;
        font-weight: 700;
        text-decoration: none;
    }

    .linkSimple:link {
        color: #00b9e5;
        font-weight: 700;
        text-decoration: none;
    }

    .linkSimple:visited {
        color: #00b9e5;
        font-weight: 700;
        text-decoration: none;
    }

/* FONTS WEIGHTS AND COLORS */

/* FORMATACOES FORMULARIOS */
/*select {
}

input[type=radio] {
}*/

/*remove IE clear text field*/
input[type=text]::-ms-clear {
    display: none;
}

/* CONTEUDOS */
/* Top Bar */
.cornerstone-top-bar {
    background-color: #00b9e5;
    color: #ffffff;
    padding: 15px 0;
    width: 100%;
    z-index: 99;
    position: fixed;
    height: 63px;
    top: 0;
}

/* Left sidebar */
.leftSideBar {
    background-color: #ffffff;
    color: #4c535d;
    border-right: 1px solid #d7d8dc;
    border-bottom: 1px solid #d7d8dc;
}

.leftSideBarFixedElement {
    background-color: #FFF;
    position: fixed;
    z-index: 50;
    width: 16%;
}

.hrHoriz1px {
    height: 1px;
    background-color: #d7d8dc;
    width: 100%;
}

.rightSideBar {
    color: #4c535d;
    padding-right: 30px;
    padding-left: 30px;
}

.lrmright {
    min-height: 100%;
}

.greyInfoBoard {
    background-color: #ffffff;
    border-left: 5px solid #6b7584;
    border-radius: 5px 5px 5px 5px;
    padding: 10px 17px;
}


.blackInfoBoard {
    background-color: #ffffff;
    border-left: 5px solid #000000;
    border-radius: 5px 5px 5px 5px;
    padding: 10px 17px;
}

.yellowInfoBoard {
    background-color: #ffffff;
    border-left: 5px solid #ffd200;
    border-radius: 5px 5px 5px 5px;
    padding: 10px 17px;
}

.redInfoBoard {
    background-color: #ffffff;
    border-left: 5px solid #ff0000;
    border-radius: 5px 5px 5px 5px;
    padding: 10px 17px;
}

.greenInfoBoard {
    background-color: #ffffff;
    border-left: 5px solid #83bb42;
    border-radius: 5px 5px 5px 5px;
    padding: 10px 17px;
}

.infoBoard {
    display: grid;
    grid-template-rows: 55% 45%;
    align-content:space-evenly;
}

.infoBoard *:first-child {
    align-items: flex-end;
}

.infoBoard *:last-child{
    align-items: flex-start;
}

.infoBoard p {
    font-size: 15px;

    text-transform: uppercase;
}

/*.chartInfoBoard {
    min-height: 140px;
}*/

.text-green {
    color: #83bb42;
}

.text-yellow {
    color: #ffd200;
}

.text-red {
    color: #ff0000;
}

.text-lightblue {
    color: #00b9e5;
}

.text-blue {
    color: #337ab7;
}

.text-white {
    color: #ffffff;
}

.border-course-catalog {
    border: 1px solid #c2cad8;
    /*min-height: 340px;*/
}

.image-course-catalog {
    background: url("/Content/images/course-example.jpg") no-repeat center center;
    background-size: cover;
    min-height: 170px;
}

.image-course-type {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.border-course-catalog h5 {
    font-size: 12px; 
    text-transform: uppercase;
    color: #444444;
    margin: 0;
    min-height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.border-course-catalog h6 {
    font-size: 12px;
    color: #444444;
    margin: 0;
}

.border-course-catalog p {
    height: 55px;
    text-overflow: ellipsis;
    color: #777777;
    font-size: 10px;
    text-align: justify;
    margin-right: 1ch;
}

.course-catalog-description {
    max-height: 20vh;
    overflow-y: auto;
    margin: 5px 0 10px;
}

.email-log-content {
    max-height: 70vh;
    overflow-y: auto;
    margin: 5px 0 10px;
}

.course-catalog-data {
    row-gap: 0.25em;
}

.text-course-catalog {
    padding: 25px;
}

.col-2-catalog {
    /*flex: 1 0 auto;*/
    width: 16.66666667%;
}

@media (min-width: 1700px)
{
    .course-catalog-data > h6:nth-child(2n+1) {
        width: 75%;
        order: initial;
    }

    .course-catalog-data > h6:nth-child(2n) {
        width: 25%;
        order: initial;

        text-align: end;
    }
}

@media (max-width: 1700px)
{
    .course-catalog-data > h6:nth-child(2n+1) {
        width: 100%;
        order: 1;
    }

    .course-catalog-data > h6:nth-child(2n) {
        width: 100%;
        order: 2;
        text-align: initial;
    }

    .course-catalog-data > h6.catalogCustomStyle:first-child + h6 { /** First element after first .catalogCustomStyle **/
        margin-top: 1ch;
    }
}


.create {
    display: inline-block;
    color: inherit;
    font-family: inherit
}

.reconcile {
    display: none;
}



/*
 * File
 */

.file {
    position: relative;
    display: inline-block;
    cursor: pointer;
    height: 2.5rem;
}

    .file input {
        min-width: 14rem;
        margin: 0;
        filter: alpha(opacity=0);
        opacity: 0;
    }

.file-custom {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 5;
    height: 2.5rem;
    padding: .5rem 1rem;
    line-height: 1.5;
    color: #555;
    background-color: #fff;
    border: .075rem solid #ddd;
    border-radius: .25rem;
    box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .file-custom:after {
        content: "Choose file...";
    }

    .file-custom:before {
        position: absolute;
        top: -.075rem;
        right: -.075rem;
        bottom: -.075rem;
        z-index: 6;
        display: block;
        content: "Browse";
        height: 2.5rem;
        padding: .5rem 1rem;
        line-height: 1.5;
        color: #555;
        background-color: #eee;
        border: .075rem solid #ddd;
        border-radius: 0 .25rem .25rem 0;
    }

/* Focus */
.file input:focus ~ .file-custom {
    box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
}

/************************************************** DIV LEFT POPUP ***************************************************/
.leftPopup, .divLeftPopup, .divLeftPopupCAU {
    position: fixed;
    width: 50%;
    min-height: calc(100% - 63px);
    z-index: 99;
    left: -100%;
    background: #ffffff;
    top: 63px;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.btnOpenDivLeftPopup {
    cursor: pointer;
}

.bgDivLeftPopup {
    display: none;
    position: fixed;
    z-index: 98;
    width: 100%;
    min-height: calc(100% - 61px);
    background: rgba(0, 0, 0, 0.7);
}

.divCloseBtn {
    position: relative;
    width: 100%;
}

.btnCloseDivLeftPopup, .btnCloseDivLeftPopupCAU {
    position: absolute;
    background: url("/Content/images/btn-close.svg") no-repeat center center;
    background-size: 25px 25px;
    height: 25px;
    width: 25px;
    top: 15px;
    right: 15px;
    cursor: pointer;
    z-index: 1;
}

.bgImgCourseDescript {
    background: url("/Content/images/course-example.jpg") no-repeat center center;
    background-size: cover;
}

.divBlackMask {
    position: relative;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff;
}

    .divBlackMask .title {
        position: absolute;
        padding: 0 30px;
        margin: 0;
        top: 30%;
        width: 100%
    }

    .divBlackMask h4 {
        padding: 0;
        margin: 0;
    }

    

.bgWhiteInfoDetailCourse {
    background: #ffffff;
    padding: 10px 20px;
    color: #4c535d;
}

/************************************************ End DIV LEFT POPUP *************************************************/
.btnClosebgDivCenterPopup {
    top: -22px;
    right: -13px;
}

.bg-grey {
    background: #f5f3f4;
    padding: 20px;
}

/* POPUPS DIVERSAS */
.bgDivCenterPopup, .bgDivCenterPopupSuccessCAU, .bgDivCenterPopupSuccessCUC, .bgDivCenterPopupSuccessRAU, .bgDivCenterPopupSuccessRUC, .bgDivCenterPopupSuccessDuplicate, .bgDivCenterPopupSuccessCourses, .bgDivCenterPopupSuccess, .bgDivCenterPopupSuccessLT, .bgDivCenterPopupSuccessRequest, .bgDivCenterPopupError, .popUpAlert {
    display: none;
    position: fixed;
    top: 0;
    z-index: 1100 !important;
    width: 100%;
    min-height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.divCenterPopup {
    position: absolute;
    background: rgba(255, 255, 255, 1);
    width: 625px;
    height: 350px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 35px 22px;
    text-align: center;
}

.divCenterPopup h3 {
    font-size: 20px;
}

/* SEARCHS POPUPS*/
.hideThisSearch, .hidePreview, .hideSearch2, .hidePreview2, .hideDuplicate, .hideThisSearchReplace, .hideThisDiv, .hideThisFilters, .hideStatus {
    display: none;
}

/* MY TEAM*/
.MyTeam {
    display: none;
}

/* CIRCULAR CHARTS */
.chartInfoBoard {
    background-color: #ffffff;
    border-radius: 5px 5px 5px 5px;
    padding: 10px 17px;
    min-height: 140px;
}

    .chartInfoBoard ul {
        padding: 0;
    }

        .chartInfoBoard ul li {
            font-size: 9px;
            list-style: none;
            text-align: left;
        }

#mychart {
    position: relative;
}

#mychart1 {
    position: relative;
}

#mychart2 {
    position: relative;
}

.chartTotalCenter {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 30px;
}

.chartCircleRed {
    background-color: red;
    width: 7px;
    height: 7px;
    border-radius: 100px;
    display: inline-block;
    margin: 0 4px 0 0;
}

.chartCircleBlue {
    background-color: blue;
    width: 7px;
    height: 7px;
    border-radius: 100px;
    display: inline-block;
    margin: 0 4px 0 0;
}

.chartCircleGreen {
    background-color: green;
    width: 7px;
    height: 7px;
    border-radius: 100px;
    display: inline-block;
    margin: 0 4px 0 0;
}

.chartCirclePurple {
    background-color: purple;
    width: 7px;
    height: 7px;
    border-radius: 100px;
    display: inline-block;
    margin: 0 4px 0 0;
}

.chartCircleOrange {
    background-color: orange;
    width: 7px;
    height: 7px;
    border-radius: 100px;
    display: inline-block;
    margin: 0 4px 0 0;
}

.chartCircleYellow {
    background-color: yellow;
    width: 7px;
    height: 7px;
    border-radius: 100px;
    display: inline-block;
    margin: 0 4px 0 0;
}

.chart-item-bg {
    stroke: #ddd
}

.chart-item-0 {
    stroke: yellow
}

.chart-item-1 {
    stroke: red
}

.chart-item-2 {
    stroke: green
}

.chart-item-3 {
    stroke: purple
}

.chart-item-4 {
    stroke: orange
}

.chart-item-5 {
    stroke: blue
}

/*LOGIN*/

.login {
    position: absolute;
    width: 500px;
    height: 244px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background-color: #e2e2e2;
    border-radius: 4px;
    padding: 20px;
}

/* FONT AWSOME + BOOTSTRAP ALTERADA */
input[type="text"], textarea {
    /*background-color: #f9f9f9;*/
    box-shadow: none;
    -webkit-box-shadow: none;
}

textarea {
    resize: none;
}

.form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #4c535d;
    /* background-color: #f3f4f6;*/
}

    .form-control:focus {
        box-shadow: none;
        -webkit-box-shadow: none;
        border-color: #cccccc;
        color: #4c535d;
        /* background-color: #f3f4f6;*/
    }

.add-on .input-group-btn > .btn {
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
    background-color: #f9f9f9;
}
/* stop the glowing blue shadow */
.add-on .form-control:focus {
    box-shadow: none;
    -webkit-box-shadow: none;
    border-color: #cccccc;
}
.dropdown-menu ul {
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 5px;
}

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

    a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
        color: inherit;
        text-decoration: none;
        font-weight: 700
    }

    a:not([href]):not([tabindex]):focus {
        outline: 0;
    }

.noUlStyle{
    list-style: none;
}
.fa {
    line-height: inherit;
    /*color: #4c535d;*/
}
.modal-confirm .icon-box {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    z-index: 9;
    text-align: center;
}

.modal-confirm .modal-content {
    padding: 20px;
    border-radius: 5px;
    border: none;
    text-align: center;
    font-size: 14px;
}

.modal-confirm .modal-body {
    color: #999;
}

.modal-confirm {
    color: #636363;
    width: 400px;
}


.btn-default {
   /* color: #333;*/
    background-color: #fff;
    border-color: #ccc;
    color: #4c535d;
}

    .btn-default:focus {
        color: #333;
        background-color: #e6e6e6;
        border-color: #8c8c8c;
    }

    .btn-default:hover {
        color: #333;
        background-color: #e6e6e6;
        border-color: #adadad;
    }

    .btn-default:active {
        color: #333;
        background-color: #e6e6e6;
        border-color: #adadad;
    }
.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    max-width: 500px;
    word-wrap: break-word;
}

.bg-secondary-inactive {
    background-color: #a3abb2 !important;
}

.dropdown-menu > li > a :hover{
    background-color: #999;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    list-style: none;
}

.tab-content {
    background-color: #fff;
    padding: 30px 30px;
    border-radius: 0 0 5px 5px;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}


.btn-outline-default {
    color: #6c757d;
    background-color: #eee;
    background-image: none;
    border-color: rgb(206, 212, 218) !important;
}

    .btn-outline-default:hover {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }

    .btn-outline-default:focus, .btn-outline-default.focus {
        box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
    }

    .btn-outline-default.disabled, .btn-outline-default:disabled {
        color: rgb(206, 212, 218);
        background-color: transparent;
    }

    .btn-outline-default:not(:disabled):not(.disabled):active, .btn-outline-default:not(:disabled):not(.disabled).active,
    .show > .btn-outline-default.dropdown-toggle {
        color: #fff;
        background-color: rgb(206, 212, 218);
        border-color: rgb(206, 212, 218);
    }

        .btn-outline-default:not(:disabled):not(.disabled):active:focus, .btn-outline-default:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-default.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
        }

.cornerstoneTabs .nav-tabs > li > a {
    border-radius: 5px 5px 0 0;
}

.cornerstoneTabs .tab-content {
    color: #4c535d;
    padding: 30px 30px;
    background-color: #ffffff;
    border-radius: 0 0 5px 5px;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.disableHorizontalScroll {
    overflow-x: hidden;
    overscroll-behavior-x: contain;
}
.cornerstoneTabs .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    color: #4c535d;
    background-color: #ffffff;
    font-weight: 700;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

.cornerstoneTabs a:active, .cornerstoneTabs a:hover, .cornerstoneTabs a:focus, .cornerstoneTabs a:visited, .cornerstoneTabs a:link {
    color: #4c535d;
    font-weight: 700;
}

.btn.active, .btn:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*.paging_simple_numbers a.paginate_button {
}*/


    .paging_simple_numbers a.paginate_button.current {
        color: #ffffff !important;
    }

.pagination {
    margin: 0;
}

    .pagination > li > a, .pagination > li > span {
        border: 1px solid #fff;
        color: #4c535d;
    }

    .pagination > li:first-child > a, .pagination > li:first-child > span {
        margin-left: 0;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    .pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
        color: #ffffff;
        background-color: #222222;
        border-color: #222222;
        border-radius: 3px 3px 3px 3px;
    }

    .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
        z-index: 3;
        cursor: default;
        color: #ffffff;
        background-color: #222222;
        border-color: #222222;
        border-radius: 3px 3px 3px 3px;
    }
.btn{
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 4px;
}
.btn-info {
    box-shadow: none;
    -webkit-box-shadow: none;
    background-color: #00b9e5 !important;
    border-color: #00b9e5 !important;
}

    .btn-info.disabled, .btn-info[disabled] {
        box-shadow: none;
        -webkit-box-shadow: none;
        background-color: lightgray !important;
        border-color: lightgray !important;
    }

.btn-override {
    box-shadow: none;
    -webkit-box-shadow: none;
    background-color: #00b9e5 !important;
    border-color: #00b9e5 !important;
}

    .btn-override.disabled, .btn-override[disabled] {
        box-shadow: none;
        -webkit-box-shadow: none;
        background-color: lightgray !important;
        border-color: lightgray !important;
    }
.btn-link {
    text-decoration: none;
    color: #4c535d;
}

    .btn-link:hover {
        text-decoration: none;
        color: #4c535d;
    }

    .btn-link:link {
        text-decoration: none;
        color: #4c535d;
    }

    .btn-link:active {
        text-decoration: none;
        color: #4c535d;
    }

    .btn-link:focus {
        text-decoration: none;
        color: #4c535d;
    }

.checkbox, .radio {
    margin-top: 0;
}

.table > thead > tr:first-child > tr {
    border: none;
}

.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 1px solid #ddd;
}

.w-84 {
    width: 84% !important;
}

/* BOOTSTRAP 5 COLUNAS */
.col-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-sm-1 {
    flex: 0 0 auto;
    width: 4.33333333%;
}

.col-15 {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}
/* FIM BOOTSTRAP 5 COLUNAS */

/* MEDIA QUERIES */
@media (max-width: 320px) {
    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 18px;
    }

    h5 {
        font-size: 16px;
    }

    .divLeftPopup, .divLeftPopupRU, .divLeftPopupAU, .divLeftPopupCUC, .divLeftPopupCAU, .divLeftPopupUDPC, .divLeftPopupCRC {
        width: 100%;
    }

    .cornerstone-top-bar {
        position: fixed;
        z-index: 999;
    }
}

@media (min-width: 321px) and (max-width: 480px) {
    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 18px;
    }

    h5 {
        font-size: 16px;
    }

    .divLeftPopup, .divLeftPopupRU, .divLeftPopupAU, .divLeftPopupCUC, .divLeftPopupCAU, .divLeftPopupUDPC, .divLeftPopupCRC {
        width: 100%;
    }

    .cornerstone-top-bar {
        position: fixed;
        z-index: 999;
    }

    /*.globalDivContents {
    }*/
}

@media (min-width: 481px) and (max-width: 768px) {
    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 18px;
    }

    h5 {
        font-size: 16px;
    }

    .divLeftPopup, .divLeftPopupRU, .divLeftPopupAU, .divLeftPopupCUC, .divLeftPopupCAU, .divLeftPopupUDPC, .divLeftPopupCRC {
        width: 100%;
    }

    .cornerstone-top-bar {
        position: fixed;
        z-index: 999;
    }

    /*.globalDivContents {
    }*/
}

@media (min-width: 769px) and (max-width: 1024px) {
    .divLeftPopup, .divLeftPopupRU, .divLeftPopupAU {
        width: 80%;
    }

    .cornerstone-top-bar {
        position: fixed;
        z-index: 999;
    }

    /*.globalDivContents {
    }*/
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .divLeftPopup, .divLeftPopupRU, .divLeftPopupAU, .divLeftPopupCUC, .divLeftPopupCAU, .divLeftPopupUDPC, .divLeftPopupCRC {
        width: 70%;
    }
}

@media (min-width: 1281px) and (max-width: 1440px) {
    .divLeftPopup, .divLeftPopupRU, .divLeftPopupAU, .divLeftPopupCUC, .divLeftPopupCAU, .divLeftPopupUDPC, .divLeftPopupCRC {
        width: 60%;
    }
}

/*@media (min-width: 1441px) and (max-width: 1600px) {
}

@media (min-width: 1601px) and (max-width: 1900px) {
   
}

@media (min-width: 1901px) {
    
}*/


/* INFOBOARD FLEX */
@media (max-width: 1000px) {
    #info-board,
    #info-board-execution {
        flex-direction: row !important;
    }

    .infoboard-kpi-section,
    .infoboard-kpi-section #ibKpis,
    .infoboard-graph-section,
    .infoboard-graph-section > div {
        flex-direction: column !important;
    }

    .infoboard-graph-section > div {
        grid-template-columns: auto;
        grid-template-rows: max-content max-content max-content;
        grid-auto-flow: column;
    }
}

@media (max-width: 1600px) {
    #info-board,
    #info-board-execution {
        flex-direction: column;
        gap: 1em;
        align-items: center;
    }

    #info-board > div,
    #info-board-execution > div {
        width: 100%;
    }

    #info-board canvas,
    #info-board-execution canvas {
        max-height: 100px;
    }

    #info-board .chartInfoBoard,
    #info-board-execution .chartInfoBoard{
        min-height: initial;
    }

    .infoBoard {
        max-width: 12em;
        min-width: 12em;
        width: 12em;
    }
    
    #ibKpis {
        width: 100%;
        justify-content: center;
        column-gap: 0.6em;
    }

    .infoboard-graph-section > div {
        gap: 0.5em;
        grid-template-columns: max-content max-content max-content !important;
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 1601px) {
    :root {
        --infoBoardHeight: 160px;
    }

    #info-board,
    #info-board-execution {
        flex-direction: row !important;
        max-height: var(--infoBoardHeight);
    }

    .chartInfoBoard{
        max-width: calc((300 * var(--infoBoardHeight))/175.39);
    }
}

/* MOBILE LANDSCAPE */
/*@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape) {
}

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}*/

/*************************************** Classes to center a div vertically *******************************************/
.container-table {
    height: 100%;
    display: table;
}

.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}
/*************************************** Classes to center a div vertically *******************************************/

/************************************** Classes to center a div horizontally ******************************************/
#info-board .inner {
    display: table;
    margin: 0 auto;
}

#info-board .outer {
    display: table;
    width: 100%
}

/*************************************Classe to center option in select bootstrap************************************************************************/
#info-board .inner.open {
    display: block;
    margin: 0 auto;
}

/************************************ End Classes to center a div horizontally ****************************************/

/* class to change mouse pointer behavior */
.clickable {
    cursor: pointer;
}
.not-clickable {
    cursor: not-allowed;
}

/* class to force datepicker to appear over modal */
.ui-datepicker {
    z-index: 999999 !important;
}

.fixedElement {
    background-color: #FFF;
    position: fixed;
    width: 220px;
    z-index: 50;
}

.errorField {
    border-color: #ff0000;
}

label.error {
    color: #ff0000;
    font-weight: 100;
}

.field-validation-valid label {
    color: #ff0000;
    font-weight: 100;
}


/* LOADER - SPINNING */
/* Absolute Center Spinner */
.loading {
    display: none;
    position: fixed;
    z-index: 9999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

    /* Transparent Overlay */
    .loading:before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(rgba(20, 20, 20,.6), rgba(0, 0, 0, .6));
        background: -webkit-radial-gradient(rgba(20, 20, 20,.6), rgba(0, 0, 0,.6));
    }

    /* :not(:required) hides these rules from IE9 and below */
    .loading:not(:required) {
        /* hide "loading..." text */
        font-size: 0;
        line-height: 0; 
        color: transparent;
        text-shadow: none;
        background-color: transparent;
        border: 0;
    }

        .loading:not(:required):after {
            content: '';
            display: block;
            font-size: 10px;
            width: 1em;
            height: 1em;
            margin-top: -0.5em;
            -webkit-animation: spinner 1500ms infinite linear;
            -moz-animation: spinner 1500ms infinite linear;
            -ms-animation: spinner 1500ms infinite linear;
            -o-animation: spinner 1500ms infinite linear;
            animation: spinner 1500ms infinite linear;
            border-radius: 0.5em;
            -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
            box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
        }

/* Animation */

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


#loader {
    width: 50%;
    margin: 20% auto;
}

/*marks a button as disabled*/
.disabled-button, .disabled-button > span {
    color: darkgray;
    pointer-events: none;
}

/*Table Assignment*/
.rTable {
    display: table;
    width: 100%;
    padding: 10px 0px 10px 0px;
    border-top: 1px solid #9c9c9c;
    border-bottom: 1px solid #9c9c9c;
    margin-bottom: 20px;
}

.rTableRow {
    display: table-row;
}

.rTableHeading {
    display: table-header-group;
}

.rTableBody {
    display: table-row-group;
}

.rTableFoot {
    display: table-footer-group;
}

.rTableCell, .rTableHead {
    display: table-cell;
}

    .rTableHead > span {
        font-weight: bold;
    }

.error-inline {
    display: inline-block !important;
    padding-left: 10px;
}

.validation-message {
    color: #dc5454;
}

.searchclear {
    position: absolute;
    right: 43px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
}
.searchclearAnonymous {
    position: absolute;
    right: 56px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
    display: none;
}

.searchclearfilter {
    position: absolute;
    right: 55px;
    top: 100px;
    bottom: 0;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
}

.searchclearunknown {
    position: absolute;
    right: 43px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
}

.searchclearResource {
    position: absolute;
    right: 43px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
}

.clearable-search {
    padding-right: 26px; /* To leave space for the X */
}

#createAnonymousUsersForm label.error,
#form-anonymous-users-name label.error {
    margin-bottom: 4px;
}

#createAnonymousUsersForm input,
#form-anonymous-users-name input {
    z-index: 1;
}

.fit-box {
    width: 100%;
    height: 130px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

/*THIS IS USED TO FORCE THE BUTTONS IN DATATABLES TO STAY SIDE BY SIDE*/
.noWrap {
    white-space: nowrap
}


.btnCloseDivLeft {
    position: absolute;
    background: url(/Content/images/btn-close.svg) no-repeat center center;
    background-size: 25px 25px;
    height: 25px;
    width: 25px;
    top: 15px;
    right: 15px;
    cursor: pointer;
    z-index: 1;
}

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

.my-pull-left {
    float: left !important;
}

.not-bold {
    font-weight: normal !important;
}

.searchClear2 {
    position: absolute;
    right: 10px;
    top: calc((1rem * 1.5)/2);
    height: 12px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
}

.progress {
    position: relative;
}

    .progress .spanBlock {
        position: absolute;
        display: block;
        width: 100%;
    }

.card-warning-strong {
    border-color: #f0ad4e;
}

    .card-warning-strong > .card-header {
        color: #fff;
        background-color: #f0ad4e;
        border-color: #f0ad4e;
    }

        .card-warning-strong > .card-header + .card-collapse > .card-body {
            border-top-color: #f0ad4e;
        }

        .card-warning-strong > .card-header .badge {
            color: #337ab7;
            background-color: #fff;
        }

    .card-warning-strong > .card-footer + .card-collapse > .card-body {
        border-bottom-color: #f0ad4e;
    }


.card-default {
    /*border-color: #f0ad4e;*/
}

    .card-default > .card-header {
        color: #fff;
        background-color: #00b9e5;
        border-color: #00b9e5;
    }

        .card-default > .card-header + .card-collapse > .card-body {
            border-top-color: #00b9e5;
        }

    .card-default > .card-header .badge {
        color: #337ab7;
        background-color: #fff;
    }

    .card-default > .card-footer + .card-collapse > .card-body {
        border-bottom-color: #00b9e5;
    }

.card-default-2 {
    border-color: #ddd;
}

    .card-default-2 > .card-header {
        color: #333333;
        background-color: #f5f5f5;
        border-color: #ddd;
    }

        .card-default-2 > .card-header + .card-collapse > .card-body {
            border-top-color: #ddd;
        }

    .card-default-2 > .card-header .badge {
        color: #f5f5f5;
        background-color: #333333;
    }

    .card-default-2 > .card-footer + .card-collapse > .card-body {
        border-bottom-color: #ddd;
    }


td.wrapok {
    white-space: normal !important
}

.btn-primary {
    background-color: #00b9e5;
    border-color: #00a3cc;
}

.btn-primary-reverted {
    background-color: #ffffff !important;
    border-color: #00859b !important;
    color: #00859b !important;
}

.list-group-item {
    position: none !important;
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    background-color: #00b9e5;
    border-color: #00a3cc;
}


#ModalName {
    padding-left: 34px !important;
}



.lds-ring {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
}

    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 20px;
        height: 20px;
        margin: 2px;
        border: 2px solid #4c535d;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: #4c535d transparent transparent transparent;
    }

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


input:not(.keep-spin-buttons)::-webkit-outer-spin-button,
input:not(.keep-spin-buttons)::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number]:not(.keep-spin-buttons) {
    -moz-appearance: textfield;
}

.training-duration-days {
    width: 4.5em;
}

.training-duration-hours,
.training-duration-minutes {
    width: 3.5em;
}

.ui-sortable-helper {
    display: table;
}

.contentFilterCornerstone > ul > li {
    color: #4c535d;
    padding: 2px 0px;
}

/** back to top button **/

#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none;
}


    div.contentFilterCornerstone2.margin-bottom-15 > div > div {
        overflow: auto !important;
    }
.popover {
    max-width: 600px;
}
.popover-html ul {
    list-style: none;
    text-align: left;
    font-size: 10px;
    margin: 0;
    padding: 0;
    display: table;
    table-layout: fixed;
}

    .popover-html ul li {
        display: table-cell;
        white-space: nowrap;
        width: auto;
    }

        .popover-html ul li + li {
            padding-left: 5px;
            width: 60%;
        }

.popover-html table {
    text-align: right;
    font-size: 10px;
    margin: 0;
    padding: 0;
}

.popover-html td {
    padding-left: 5px;

}  
/**********/



.input-group-append > i {
    padding-top: 9px;
}

.cornerstone-top-bar > .row {
    margin-top: -15px;
}

dd {
    margin-bottom: 0px;
}

#TargetsRestrictedProvidersList ul,
#ManagersRestrictedProvidersList ul,
#RestrictedCurrenciesList ul,
#LDRestrictedProvidersList ul {
    padding-left: 1em;
}


/** Fix for Input Not Allowed cursor in Bootstrap 5 **/
fieldset[disabled] input[type="checkbox"], fieldset[disabled] input[type="radio"], input[type="checkbox"].disabled, input[type="checkbox"][disabled], input[type="radio"].disabled, input[type="radio"][disabled] {
    cursor: not-allowed;
}

.modal-content {
    box-shadow: 0 3px 15px rgba(0, 0, 0, .6);
    padding-left: 1rem;
    padding-right: 1rem;
}

div.dropdown.bootstrap-select {
    border: 1px solid #ced4da;
}

/* Add to form-control the same border-radius as form-select */
input.form-control {
    border-radius: 0.25rem !important;
}

#training_duration_form .form-control {
    display: inline-block;
    padding: 0.2rem 0.4rem;
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}

.preferences-menu-item {
    text-decoration: none;
}

.preferences-menu-item:hover {
    text-decoration: underline;
}

ul.gj-list-bootstrap li [data-role=display] {
    padding: 0px 0px 0px 4px !important;
}

ul.gj-list-bootstrap li [data-role=checkbox] {
    padding: 0px 3px 0px 3px !important;
}

.gj-dropdown-bootstrap [role=presenter] [role=expander].gj-dropdown-expander-mi,
[data-type=tree] ul li [data-role=expander].gj-tree-font-awesome-expander,
[data-type=tree] ul li [data-role=expander].gj-tree-glyphicons-expander,
[data-type=tree] ul li [data-role=expander].gj-tree-material-icons-expander {
    width: 12px !important;
}

.validator-error-class {
    color: #a94442;
    padding: 3px 0px 0px 0px;
}

#tb-email-config tr td {
    vertical-align: middle;
}

#tb-email-config tr th:last-child,
#tb-email-config tr td:last-child,
#tbCustom tr td:last-child {
    vertical-align: middle;
    width: 40px;
}

#tb-core-config tr td {
    vertical-align: middle;
}

#tb-core-config-arquived tr td {
    border: none !important;
    padding-right: 50px;
    padding-left: 50px;
}

.bgDivCenterPopupWarning.popUpAlert,
.bgDivCenterPopupError.popUpAlert {
    align-items: center;
}

.bgDivCenterPopupWarning .divCenterPopup,
.bgDivCenterPopupError .divCenterPopup {
    height: initial;
    position: initial;
    max-height: 50%;
}

#txtWarningPopUpDescriptionWrapper,
#txtErrorPopUpDescriptionWrapper {
    max-height: 25vh;
    overflow-y: auto;
}

#tb-email-source-smtp-config {
    vertical-align: middle;
}

/* Modal Intermediate Overlay workaround */
.modal.show.fade {
    z-index: 1062 !important;
}

.modal-backdrop.show.fade {
    z-index: 1061 !important;
}

/* Modal Intermediate Overlay workaround */
.modal-front {
    z-index: 1065 !important;
}

#tableCustomFields tr td:first-child {
    word-break: break-all;
    width: 100%;
}

#tableRestrictByCSoDTrainingCustomFields button {
    margin: 2px;
    padding: 5px 8px;
}

.modal-xxl {
    max-width: 1540px;
}

@media (min-width: 1200px) {
    .modal-xl {
        max-width: 1540px;
    }
}

.text-start-bold {
    text-align: left !important;
    font-weight: bold;
}

/*body {
    margin-top: 40px;
    background: #eee;
}*/

.page-todo .tasks {
    background: #fff;
    padding: 0;
    /*border-right: 1px solid #d1d4d7;
    margin: -30px 15px -30px -15px*/
}

.page-todo .task-list {
    padding: 30px 15px;
    height: 100%
}

.page-todo .graph {
    height: 100%
}

.page-todo .priority.high {
    background: #eae8e8;
    margin-bottom: 1px
}

    .page-todo .priority.high span {
        background: #938f8f;
        padding: 2px 10px;
        color: #fff;
        display: inline-block;
        font-size: 12px
    }

.page-todo .priority.medium {
    background: #a1bff1;
    margin-bottom: 1px
}

    .page-todo .priority.medium span {
        background: #4276cd;
        padding: 2px 10px;
        color: #fff;
        display: inline-block;
        font-size: 12px
    }

.page-todo .priority.low {
    background: #cfedda;
    margin-bottom: 1px
}

    .page-todo .priority.low span {
        background: #4dbd74;
        padding: 2px 10px;
        color: #fff;
        display: inline-block;
        font-size: 12px
    }

.page-todo .task {
    border-bottom: 1px solid #e4e5e6;
    margin-bottom: 1px;
    position: relative
}

    .page-todo .task .desc {
        display: inline-block;
        width: 75%;
        padding: 10px 10px;
        font-size: 12px
    }

        .page-todo .task .desc .title {
            font-size: 18px;
            margin-bottom: 5px
        }

    .page-todo .task .time {
        display: inline-block;
        /*width: 15%;*/
        padding: 10px 10px 10px 0;
        font-size: 12px;
        text-align: right;
        position: absolute;
        top: 0;
        right: 0
    }

        .page-todo .task .time .date {
            font-size: 18px;
            margin-bottom: 5px
        }

    .page-todo .task.last {
        border-bottom: 1px solid transparent
    }

    .page-todo .task.high {
        border-left: 2px solid #eae8e8
    }

    .page-todo .task.medium {
        border-left: 2px solid #a1bff1
    }

    .page-todo .task.low {
        border-left: 2px solid #cfedda
    }

.page-todo .timeline {
    width: auto;
    height: 100%;
    margin: 20px auto;
    position: relative
}

    .page-todo .timeline:before {
        position: absolute;
        content: '';
        height: 100%;
        width: 4px;
        background: #d1d4d7;
        left: 50%;
        margin-left: -2px
    }

.page-todo .timeslot {
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 5px 0
}

    .page-todo .timeslot .task {
        position: relative;
        width: 44%;
        display: block;
        border: none;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box
    }

        .page-todo .timeslot .task span {
            border: 2px solid #63c2de;
            background: #e1f3f9;
            padding: 5px;
            display: block;
            font-size: 11px
        }

            .page-todo .timeslot .task span span.details {
                font-size: 16px;
                margin-bottom: 10px
            }

            .page-todo .timeslot .task span span.remaining {
                font-size: 14px
            }

            .page-todo .timeslot .task span span {
                border: 0;
                background: 0 0;
                padding: 0
            }

        .page-todo .timeslot .task .arrow {
            position: absolute;
            top: 6px;
            right: 0;
            height: 20px;
            width: 20px;
            border-left: 12px solid #63c2de;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            margin-right: -18px
        }

            .page-todo .timeslot .task .arrow:after {
                position: absolute;
                content: '';
                top: -12px;
                right: 3px;
                height: 20px;
                width: 20px;
                border-left: 12px solid #e1f3f9;
                border-top: 12px solid transparent;
                border-bottom: 12px solid transparent
            }

    .page-todo .timeslot .icon {
        position: absolute;
        border: 2px solid #d1d4d7;
        background: #2a2c36;
        -webkit-border-radius: 50em;
        -moz-border-radius: 50em;
        border-radius: 50em;
        height: 30px;
        width: 30px;
        top: 0;
        left: 50%;
        margin-left: -17px;
        color: #fff;
        font-size: 14px;
        line-height: 30px;
        text-align: center;
        text-shadow: none;
        z-index: 2;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box
    }

    .page-todo .timeslot .time {
        background: #d1d4d7;
        position: absolute;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        top: 1px;
        left: 50%;
        padding: 5px 10px 5px 40px;
        z-index: 1;
        margin-top: 1px
    }

    .page-todo .timeslot.alt .task {
        margin-left: 56%;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box
    }

        .page-todo .timeslot.alt .task .arrow {
            position: absolute;
            top: 6px;
            left: 0;
            height: 20px;
            width: 20px;
            border-left: none;
            border-right: 12px solid #63c2de;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            margin-left: -18px
        }

            .page-todo .timeslot.alt .task .arrow:after {
                top: -12px;
                left: 3px;
                height: 20px;
                width: 20px;
                border-left: none;
                border-right: 12px solid #e1f3f9;
                border-top: 12px solid transparent;
                border-bottom: 12px solid transparent
            }

    .page-todo .timeslot.alt .time {
        top: 1px;
        left: auto;
        right: 50%;
        padding: 5px 40px 5px 10px
    }

@media only screen and (min-width:992px) and (max-width:1199px) {
    .page-todo .task .desc {
        display: inline-block;
        width: 70%;
        padding: 10px 10px;
        font-size: 12px
    }

        .page-todo .task .desc .title {
            font-size: 16px;
            margin-bottom: 5px
        }

    .page-todo .task .time {
        display: inline-block;
        float: right;
        width: 20%;
        padding: 10px 10px;
        font-size: 12px;
        text-align: right
    }

        .page-todo .task .time .date {
            font-size: 16px;
            margin-bottom: 5px
        }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .page-todo .task {
        margin-bottom: 1px
    }

        .page-todo .task .desc {
            display: inline-block;
            width: 65%;
            padding: 10px 10px;
            font-size: 10px;
            margin-right: -20px
        }

            .page-todo .task .desc .title {
                font-size: 14px;
                margin-bottom: 5px
            }

        .page-todo .task .time {
            display: inline-block;
            float: right;
            width: 25%;
            padding: 10px 10px;
            font-size: 10px;
            text-align: right
        }

            .page-todo .task .time .date {
                font-size: 14px;
                margin-bottom: 5px
            }

    .page-todo .timeslot .task span {
        padding: 5px;
        display: block;
        font-size: 10px
    }

        .page-todo .timeslot .task span span {
            border: 0;
            background: 0 0;
            padding: 0
        }

            .page-todo .timeslot .task span span.details {
                font-size: 14px;
                margin-bottom: 0
            }

            .page-todo .timeslot .task span span.remaining {
                font-size: 12px
            }
}

@media only screen and (max-width:767px) {
    .page-todo .tasks {
        position: relative;
        margin: 0 !important
    }

    .page-todo .graph {
        position: relative;
        margin: 0 !important
    }

    .page-todo .task {
        margin-bottom: 1px
    }

        .page-todo .task .desc {
            display: inline-block;
            width: 65%;
            padding: 10px 10px;
            font-size: 10px;
            margin-right: -20px
        }

            .page-todo .task .desc .title {
                font-size: 14px;
                margin-bottom: 5px
            }

        .page-todo .task .time {
            display: inline-block;
            float: right;
            width: 25%;
            padding: 10px 10px;
            font-size: 10px;
            text-align: right
        }

            .page-todo .task .time .date {
                font-size: 14px;
                margin-bottom: 5px
            }

    .page-todo .timeslot .task span {
        padding: 5px;
        display: block;
        font-size: 10px
    }

        .page-todo .timeslot .task span span {
            border: 0;
            background: 0 0;
            padding: 0
        }

            .page-todo .timeslot .task span span.details {
                font-size: 14px;
                margin-bottom: 0
            }

            .page-todo .timeslot .task span span.remaining {
                font-size: 12px
            }
}

/*body {
    margin-top: 20px;
    background: #DCDCDC;
}*/

.thumb-sm {
    height: 36px;
    width: 36px;
}

.card-box {
    padding: 20px;
    border-radius: 3px;
    margin-bottom: 30px;
    background-color: #fff;
}

.taskList {
    min-height: 40px;
    margin-bottom: 0
}

.taskList li {
    background-color: #fff;
    border: 1px solid rgba(121, 121, 121, .2);
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 3px
}

    .taskList li:last-of-type {
        margin-bottom: 0
    }

.taskList a {
    font-size: 13px
}

.taskList .checkbox {
    margin-left: 20px;
    margin-top: 5px
}

.text-muted {
    color: #98a6ad !important;
}

.titleFilterSessions {
    /* width: 100%; */
    font-size: 18px;
    cursor: pointer;
    font-weight: 700;
}


/*body {
    background-color: #567;
    padding: 0 10px;
    font-family: 'Open Sans', sans-serif;
}*/

.accordion-container {
    /*position: relative;
    max-width: 500px;
    height: auto;
    margin: 10px auto;*/
}

    .accordion-container > h2 {
        text-align: center;
        color: #fff;
        /*padding-bottom: 5px;*/
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #ddd;
    }

.set {
    position: relative;
    width: 100%;
    height: auto;
    background-color: #f5f5f5;
}

    .set > a {
        display: block;
        padding: 10px 15px;
        text-decoration: none;
        color: #555;
        font-weight: 600;
        border-bottom: 1px solid #ddd;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }

        .set > a i {
            float: right;
            margin-top: 2px;
        }

        .set > a.active {
            background-color: #b3b7b8;
            color: #fff;
        }

.content {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    display: none;
}

    .content p {
        padding: 10px 15px;
        margin: 0;
        color: #333;
    }

div.layout-start {
    border: 1px solid #dc3545;
    border-radius: 3px;
    padding: 8px;
}

div.layout-end {
    border: 1px solid #198754;
    border-radius: 3px;
    padding: 8px;
}

div.layout-full {
    border: 1px solid #0d6efd;
    border-radius: 3px;
    padding: 8px;
}

.dataTables_processing.dummy-table-processing {
    position: absolute;
    margin: 0;
    padding: 0;
    border: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(90, 90, 90, 0.5);
}

.dummy-table {
    display: none;
}

/*********************/
/* LRM - Preferences */
/*********************/

.system-label {
    color: gray;
    cursor: default;
}

.system-label-small {
    color: gray;
    font-size: small;
    cursor: default;
}

/********************/
/* LRM - Info Board */
/********************/

.lrm-infoboard-holder {
    position: relative;
}

.lrm-infoboard {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2em;
}

.svg-item {
    max-width: 12%;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .svg-item {
        width: 80%;
    }
}

.donut *:focus {
    outline: none;
}

.donut-segment {
    transform-origin: center;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.donut-point {
    pointer-events: none;
}

/* Create two identical animations to alternate between the two, to trigger change */

@keyframes donutAnimation1 {
    from {
        stroke-dasharray: var(--from-dasharray);
        stroke-dashoffset: var(--from-dashoffset);
    }

    to {
        stroke-dasharray: var(--to-dasharray);
        stroke-dashoffset: var(--to-dashoffset);
    } 
}

@keyframes donutAnimation2 {
    from {
        stroke-dasharray: var(--from-dasharray);
        stroke-dashoffset: var(--from-dashoffset);
    }

    to {
        stroke-dasharray: var(--to-dasharray);
        stroke-dashoffset: var(--to-dashoffset);
    } 
}

.donut-text {
    font-family: Arial, Helvetica, sans-serif;
    fill: black;
    pointer-events: none;
}

    .donut-text.donut-title-text {
        font-weight: bold;
    }

.donut-icon {
    color: black;
    pointer-events: none;
}

.donut-icon i {
    transform: translateY(5px) scale(1.5);
}

/***********************/
/* LRM - Status Colors */
/***********************/

:root {
    --lrm-gray: #9d9d9d;
    --lrm-gray-dark: #8e8e8e;
    --lrm-gray-darker: #6a6a6a;
    --lrm-blue: #4276ce;
    --lrm-blue-dark: #3165bd;
    --lrm-blue-darker: #0f439b;
    --lrm-green: #55cc44;
    --lrm-green-dark: #44bb33;
    --lrm-green-darker: #229911;
    --lrm-yellow: #fde011;
    --lrm-yellow-dark: #eccf00;
    --lrm-red: #ff3311;
    --lrm-red-dark: #ee2200;
}

/*******************/
/* LRM - Tab Tasks */
/*******************/

.btn-lrm-not-started {
    background-color: var(--lrm-gray);
    border-color: var(--lrm-gray-dark);
    color: #ffffff;
}

    .btn-lrm-not-started:hover {
        background-color: var(--lrm-gray-darker);
        border-color: var(--lrm-gray-darker);
        color: #eeeeee;
    }

.btn-lrm-in-progress {
    background-color: var(--lrm-blue);
    border-color: var(--lrm-blue-dark);
    color: #ffffff;
}

    .btn-lrm-in-progress:hover {
        background-color: var(--lrm-blue-darker);
        border-color: var(--lrm-blue-darker);
        color: #eeeeee;
    }

.btn-lrm-completed {
    background-color: var(--lrm-green);
    border-color: var(--lrm-green-dark);
    color: #ffffff;
}

    .btn-lrm-completed:hover {
        background-color: var(--lrm-green-darker);
        border-color: var(--lrm-green-darker);
        color: #eeeeee;
    }

.text-lrm-not-started {
    color: var(--lrm-gray-dark);
}

.text-lrm-in-progress {
    color: var(--lrm-blue-dark);
}

.text-lrm-completed {
    color: var(--lrm-green-dark);
}

.text-lrm-expiring {
    color: var(--lrm-yellow-dark);
}

.text-lrm-expired {
    color: var(--lrm-red-dark);
}

/**********************/
/* LRM - Tab Sessions */
/**********************/

/* Estilos para os ícones de semáforo 3D (Prioridade) */
.semaforo-icone {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    /*box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.6), 0px 0px 12px rgba(0, 0, 0, 0.4), 0px 4px 8px rgba(0, 0, 0, 0.2);*/
}

.semaforo-icone-small {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    /*box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.6), 0px 0px 12px rgba(0, 0, 0, 0.4), 0px 4px 8px rgba(0, 0, 0, 0.2);*/
}

.semaforo-azul {
    background: radial-gradient(circle, var(--lrm-blue) 35%, var(--lrm-blue));
    /*filter: blur(1px);*/
}

.semaforo-verde {
    background: radial-gradient(circle, var(--lrm-green) 35%, var(--lrm-green));
    /*filter: blur(1px);*/
}

.semaforo-amarelo {
    background: radial-gradient(circle, var(--lrm-yellow) 35%, var(--lrm-yellow));
    /*filter: blur(1px);*/
}
.semaforo-amarelo-clock {
    background: radial-gradient(circle, var(--lrm-yellow) 35%, var(--lrm-yellow));
    /*filter: blur(1px);*/
}
.semaforo-amarelo-clock:before {
    content: "\f017"; /* Código do ícone de relógio do FontAwesome */
    font-family: "Font Awesome 5 Free"; /* Família de fontes do FontAwesome */
    color: black; /* Cor do ícone */
    font-size: 24px; /* Ajuste o tamanho do ícone conforme necessário */
    position: absolute; /* Relativo ao contêiner */
    transform: translate(2%, -15%);
}

.semaforo-vermelho {
    background: radial-gradient(circle, var(--lrm-red) 35%, var(--lrm-red));
    /*filter: blur(1px);*/
}

.semaforo-vermelho-clock {
    background: radial-gradient(circle, var(--lrm-red) 35%, var(--lrm-red));
    /*filter: blur(1px);*/
}
.semaforo-vermelho-clock:before {
    content: "\f017"; /* Código do ícone de relógio do FontAwesome */
    font-family: "Font Awesome 5 Free"; /* Família de fontes do FontAwesome */
    color: white; /* Cor do ícone */
    font-size: 24px; /* Ajuste o tamanho do ícone conforme necessário */
    position: absolute; /* Relativo ao contêiner */       
    transform: translate(2%, -15%);
}

.semaforo-gray {
    background: radial-gradient(circle, var(--lrm-gray) 35%, var(--lrm-gray));
    /*filter: blur(1px);*/
}

/* Estilos para as badges de status 3D */
.badge-3d {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    border-radius: 1rem;
    /*box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);*/
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.badge-not-started {
    background: radial-gradient(circle, #898484 95%, #6b6464);
}

.badge-in-progress {
    background: radial-gradient(circle, #ffcc66 95%, #cc9900);
}

.badge-done {
    background: radial-gradient(circle, #4dbd74 95%, #009900);
}

.rounded-select-tasks {
    float: left;
    /* border-radius: 15px; */
    height: 32px;
    font-size: 12px;
    width: 12%;
    text-align: center;
}

/**********************/
/* LRM - System Tasks */
/**********************/

#localSelectItems_table td {
    text-align: left;
}

#localSelectItems_table th.sorting_asc {
    cursor: default !important;
}

    #localSelectItems_table th.sorting_asc::before,
    #localSelectItems_table th.sorting_asc::after {
        display: none !important;
    }

#localSelectItems_table .choose-column-item-button,
#localSelectItems_table .remove-column-item-button,
#localSelectItems_table .choose-column-resources-button,
#localSelectItems_table .remove-column-resource-button,
#localSelectItems_table .choose-part-resources-button,
#localSelectItems_table .remove-part-resource-button {
    margin: 0 !important;
}

#localSelectItems_table .remove-column-item-button,
#localSelectItems_table .remove-column-resource-button,
#localSelectItems_table .remove-part-resource-button {
    font-size: smaller;
    color: red;
}

#localSelectItems_table .colored-row td {
    background-color: #e8f0ff !important;
}

.resources-header-table {
    width: auto;
    margin-bottom: 0;
}

.resources-header-table th {
    padding: 1em 1em 1em 1em;
}

.resources-header-table td {
    padding: 0 1em 0.5em 1em;
}

.resources-header-table tr:last-of-type td {
    padding: 0 1em 1em 1em;
}

.resources-header-table tbody tr {
    border-style: hidden;
    line-height: 1.5em;
}

.resources-header-table tr > * {
    background-color: #f2f2f2;
}

.resources-header-table-title {
    border-bottom: none;
    padding-bottom: 0.5em;
}

.resources-header-table-title h5 {
    margin-bottom: 0;
}

.local-select-items-select-resources-span {
    font-weight: normal;
}

.local-select-items-resources-list {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

.local-select-items-resources-list li {
    display: block;
}

.message-counter {
    position: absolute;
    bottom: -5px;
    right: -10px;
    background-color: black;
    color: white;
    font-size: 10px;
    font-weight: bold;
    border: 0.5px solid black;
    border-radius: 50%;
    padding: 1px 3px;
    min-width: 14px;
    text-align: center;
    line-height: 1;
    box-shadow: 0 0 2px black;
}

/*********/
/* Other */
/*********/

.grayed {
    padding-block: 0.75rem;
    margin-bottom: 0.5rem !important;
    margin-inline: 0;
    background-color: #eaeaea;
}

.vertically-centered {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.search-modal .modal-body {
    overflow-x: auto;
}

.search-modal .modal-dialog {
    width: 800px;
}

.search-modal a, .search-modal .fa-home {
    cursor: pointer;
}

.search-modal .search-row {
    display: flex;
    align-items: flex-end;
}

.show-tooltip-when-disabled[disabled] {
    pointer-events: auto;
    cursor: default;
}

/* TP - SingleSegment */
/* permite que palavras longas quebrem e evite sobreposição */
.break-word {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}