/* define variables */
/* :root{
    --color-active:#ff8800;
    --color-background: #e1e2e3;
    --color-dark: #333;
    --color-letter: #585858;
}

 */
/* Custom Checkbox */
/* .icheck-primary-modification > label,
.icheck-primary-modification > input[type="hidden"] + label{
    background-color: green;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    border: 1px solid #D3CFC8;
    margin-left: -29px !important;
}
 */
.icheck-primary-modification, .icheck-danger-modification{
    margin-top: 9px !important;
}

.icheck-primary-modification > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-primary-modification > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
  border-color: #33e0fe;
}

.icheck-primary-modification > input:first-child:not(:checked):not(:disabled):focus + label::before,
.icheck-primary-modification > input:first-child:not(:checked):not(:disabled):focus + input[type="hidden"] + label::before {
  border-color: #33e0fe;
}

.icheck-primary-modification > input:first-child:checked + label::before,
.icheck-primary-modification > input:first-child:checked + input[type="hidden"] + label::before {
  background-color: #33e0fe;
  border-color: #33e0fe;
}



.icheck-danger-modification > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-danger-modification > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
  border-color: #dc3545;
}

.icheck-danger-modification > input:first-child:not(:checked):not(:disabled):focus + label::before,
.icheck-danger-modification > input:first-child:not(:checked):not(:disabled):focus + input[type="hidden"] + label::before {
  border-color: #dc3545;
}

.icheck-danger-modification > input:first-child:checked + label::before,
.icheck-danger-modification > input:first-child:checked + input[type="hidden"] + label::before {
  background-color: #dc3545;
  border-color: #dc3545;
}

.documentActions{
    display: flex;
    justify-content: center;
    align-items: center;

}
/* End custom checkbox  */

/* Card Custome */
.card{
    min-width: auto !important;
}
/*  */

.qr-small svg {
    width: 110px;
    height: 110px;
}


/* TIPO GRAFIA */

/* ROBOTO */

@font-face {
    font-family: "Abel_Regular";
    src: url("../fonts/caldwell/abel-regular.ttf");
}

@font-face {
    font-family: "Alata_Regular";
    src: url("../fonts/caldwell/alata-regular.ttf");
}

@font-face {
    font-family: "Roboto_Regular";
    src: url("../fonts/caldwell/roboto_regular.ttf");
}

@font-face {
    font-family: "Roboto_Bold";
    src: url("../fonts/caldwell/roboto_bold.TTF");
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    cursor: hand;
    background-repeat: no-repeat;
    background-position: center right;
}
/* .loaderPreview{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../images/loading2.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
} */

.displayFlexColumn{
    padding-top: 5px;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
}

.spinner-border-list{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    z-index: 99999;
    opacity: 10;
}
.footerHome{
    /* color: white; */
    /* max-width:100%; */
}
.circleStyle{
    font-size: 7px;
    padding-left: 5px;
    padding-right: 5px;
}
.textCircleStyle{
    display: flex;
    justify-content: center;
    align-items: center;
}
.logoHome {
    width: 830px;
    height: auto;
}
.logoHome.logoAdmin{
    width: 630px !important;
}
.divLogoCertification{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.logoCertification{
    width: 100px !important;
    height: 100px !important;
}
.itemsCountLogoCertification{
    font-size: 15px;
    font-weight: 700;
    padding-left: 10px;
}
#logoImageCertification{
    display: none;
}

.isLocked{
    display: none;
}
.availableDateCSS {
    background-color: #6ef0d9 !important;
    color: black !important;
    border-radius: 50%;
    font-weight: bold;
}

/* date selected and available */
.datepicker td.active.availableDateCSS,
.datepicker td.active.availableDateCSS:hover {
    background-color: #28a745 !important;
    color: white !important;
}

.logoHomePortal{
    width: 300px;
    height: auto;
}
.alertDocumentsPortals{
    padding: 1.75rem 1.25rem !important;
    border-radius: 15px !important;
}
table.dataTable thead .sorting {
    background-image: url("../images/sort_both.png");
}
table.dataTable thead .sorting_asc {
    background-image: url("../images/sort_asc.png") !important;
}
table.dataTable thead .sorting_desc {
    background-image: url("../images/sort_desc.png") !important;
}
table.dataTable thead .sorting_asc_disabled {
    background-image: url("../images/sort_asc_disabled.png");
}
table.dataTable thead .sorting_desc_disabled {
    background-image: url("../images/sort_desc_disabled.png");
}


.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da;
    padding: .46875rem .75rem;
    height: calc(2.25rem + -4px);
}

.iconDate{
    display: flex;
}
.inputIcon{
    margin-top: 5px;
    overflow: inherit;
    position: absolute;
    margin-left: 87%;
    background: transparent;
    background-color: transparent;
    border: 0px;
}

.hiddenErrorBBC, .hiddenErrorBBCAdminProjectManager, .textDangerHidden, .textURLInvititaionDangerHidden, .textURLMeetDangerHidden, .hiddenErrorCompanyNew, .hiddenErrorEmailNew,
.hiddenErrorEmailNewExist, .showVVFContractNumber, .hiddenRowImportCertifiedPayroll, .succesFile, .errorsFile, .hiddenTextSubjectTraining,
.hiddenTextUrlInvitation, .hiddenTextUrlMeet, .dateStartEndPeriod, .hiddenTextErrorCPExceptions, .hiddenTextErrorCPExceptionsDashboard, .hiddenSection3, .hiddenSection3Upload,
.hiddenContentProject, .hiddenContentContractorData, .hiddenMessageCertifiedPayroll, .detailsPermission, .hiddenActAsPrime, .isProxy{

    display: none;
}
[class*="messageWageDetermination_"]{
    display: none;
    padding-top: 5px;
}
[id*="duplicateCompany_"]{
    display: none;
}
.select2-container.select2-container--default.select2-container--open{
    z-index: 1090 !important;
}

#listCertifiedPayrollGeneral{
    margin-left: -8px !important;
}

/* TABLES SERVER SIDE */


/* Card Header Notification Certified Payroll List */

.cardHeaderTitleNotification{
    display: flex;
    justify-content: space-between;
    padding: 5px;
    color: black;
}
.cardHeaderNotification{
    margin-bottom: 5px !important;
}
.cardHeaderNotification.borderInfo{
    border: 2px solid #087990 !important;
}
.cardHeaderTitleNotification.info{
    background-color: #087990;
    color: #fff;
}
.cardHeaderNotification.borderDanger{
    border: 2px solid #842029 !important;
}
.cardHeaderTitleNotification.danger{
    background-color: #842029;
    color: #fff;
}
.cardHeaderNotification.borderPrimary{
    border: 2px solid #084298 !important;
}
.cardHeaderTitleNotification.primary{
    background-color: #084298;
    color: #fff;
}
.cardHeaderNotification.borderWarning{
    border: 2px solid #ffc107 !important;
}
.cardHeaderTitleNotification.warning{
    background-color: #ffc107;
    color: #212529;
}
/* End card header notification */


.tfootInputs tr th input{
    padding: 8px 8px 4px 8px;
    border-radius: 6px;
    margin-bottom: 25px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: "Roboto_Regular";
    font-size: 14px;
    background-color: transparent;

    display: block;
    height: calc(2.25rem + 2px);
    color: #495057;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    box-shadow: inset 0 0 0 transparent;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.tfootInputs tr th input:focus{
    border: 1px solid #33e0fe !important;
}


/* END TABLES SERVER SIDE  */

/* PORTAL */

.styleInputFile{
    max-width: 190px !important;
}

.textFirstNameCertification{
    font-family: "Roboto_Regular";
    font-size: 13px;
}

.styleLiStatus, .styleLiStatus > a{
    font-size: 12px;
}




/*
    code by Iatek LLC 2018 - CC 2.0 License - Attribution required
    code customized by Azmind.com
*/
@media (min-width: 768px) and (max-width: 991px) {
    .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
}
@media (min-width: 576px) and (max-width: 768px) {

    .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
}
@media (min-width: 576px) {
    .carousel-item {
        margin-right: 0;
    }

    .carousel-inner .active + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
@media (min-width: 768px) {
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
@media (min-width: 991px) {
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}















.statusContent{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logoContent{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
/*     border: 1px solid #d2d6de; */
/*     border-radius: 9px; */
    padding: 10px 10px;
    min-height: 168px;
    max-height: 168px;
}

.buttomRadioPrimary + label::before{
    content: "✓" !important;
    color: grey;
    text-align: center;
    font-size: 10px !important;
}

.buttomRadioPrimary:checked + label::after{
        content: "✓" !important;
        display: inline-block !important;
        position: absolute !important;
        top: 1px !important;
        left: 8px !important;
        width: 7px !important;
        color: white !important;
        height: 10px !important;
        border: none !important;
        border-left: none !important;
        border-top: none !important;
        transform: none !important;
        font-size: 10px !important;
}

.buttomRadioDanger + label::before{
    content: "X" !important;
    /* color: #dc3545; */
    color: grey;
    text-align: center;
    font-size: 10px !important;
}

.buttomRadioDanger:checked + label::after{
        content: "X" !important;
        display: inline-block !important;
        position: absolute !important;
        top: 1px !important;
        left: 8px !important;
        width: 7px !important;
        color: white !important;
        height: 10px !important;
        border: none !important;
        border-left: none !important;
        border-top: none !important;
        transform: none !important;
        font-size: 10px !important;
        /* transform: translate(7.75px, 4.5px) rotate(45deg);
        -ms-transform: translate(7.75px, 4.5px) rotate(45deg);*/
}


*[id*="selectCertificationCategory_"] ~ .select2-container--default .select2-selection--single .select2-selection__rendered,
*[id*="selectBusinessStructure_"] ~ .select2-container--default .select2-selection--single .select2-selection__rendered{
    font-weight: 700;
    font-size: 18px;
}


.boxCheckbox{
    width: 18px;
    height: 18px;
}


.paddingLeftRightButton{
    padding: 0.375rem 5px 0.375rem 5px;
}
.alertSweetAlert{
    display:none;
    color: red;
}
.my-validation-message_certification{
    display: block !important;
    text-align: center !important;
    /* padding-left: 26px !important; */
}

.my-validation-message_certification::before {
    display: block !important;
    margin-left: 50% !important;
}




.spanContentFile{
    position: absolute;
    margin-left: 10px;
}
.inputFileDocument{
    width: 250px !important;
    margin: 0px !important;
    padding-top: 23px !important;
}

.textDocumentNote, .textTitleDocumentNote {
    color: grey;
    font-size: 12px;
}
.textTitleDocumentNote{
    color: black;
}

.swal2-container {
    z-index: 20000 !important;
  }

  #selectTemplate .select2-container.select2-container--default.select2-container--below.select2-container--open{
    z-index: 99999 !important;
}
#selectTemplate .select2-container.select2-container--default.select2-container--below.select2-container--focus{
    z-index: 99999 !important;
}
.custom_container_delete_document_list{
    text-align: left !important;
}
.custom-container-certification-company-list{
    z-index: 5 !important;
}

.styleTableCertificationCompanyList{
    width: 100%;
}
.styleTableCertificationCompanyList th, .styleTableCertificationCompanyList td{
    border: 0px solid transparent;
    padding: 0px !important;
    margin: 0px !important;
}

.styleTableCertificationCompanyList tr:nth-child(2) {
    background-color: transparent !important;
}
.styleTableCertificationCompanyList tr {
    background-color: transparent !important;
}

.divFlexCertificationCompany{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.listDocumentTypeTable{
    margin-top: 25px;
    display: none;
}

.styleSVGMenu{
    fill: white;
    width: 20px;
    height: 20px;
}
.selectYearQuarter{
    width: 150px !important;
}
 .widthTableJobClassification {
    width: 400px !important;
    word-wrap: break-word !important;
 }
 .tableSelectPersonnel{
    font-size: 9px !important;
 }
 .imgDashboard{
    display: flex;
    justify-content: center;
    height: 20vh;
    width: 19vw;
    margin-left: -5px;
 }
 .imgDashboard img {
    height: 20vh;
    width: 19vw;
    object-fit: contain;
    border-radius: 5%;
}
 .btnAdd{
    width: 72px;
    height: 40px;
 }
.titleAssociatedProjects{
    font-family: "Roboto_Bold";
    font-size: 18px;
    color: black;

}
.rowLogoHomeProject{
    display: flex;
    justify-content: space-around;
}
.logoHomeProject{

    width: 130px;
    height: auto;
}
.graphsTitle{
    font-size: 22px;
}
.subtitle_18{
    font-size: 18px;
}

.subtitle_20{
    font-size: 20px;
}
 .completeProfile{
    font-size: 13px;
    color: black;
    background-color: white;
    padding: 5px;
    border-radius: 10px;
 }

 .selectContractDisplay, .selectProjectDisplay, .rowProjects, .rowContractsUserProfile{
     display: none;
 }
.messageError, .messageErrorMissingReport {
    color: red;
    display: none;
}

/* FAQs */
.textFaq {
    text-align: justify;
    padding: 10px 20px 10px 20px;
}
/* END FAQs */

/* LIST */
.iconInfo{
    color: orange !important;
}
.iconWarning{
    color: orange !important;
}
#listUser.table td {
    text-align: center;
    vertical-align: inherit;
}

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}

/* [data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
} */

[data-title]:after {
    content: attr(data-title);
    background-color: #333;
    color: #fff;
    font-size: 14px;
    font-family: Raleway;
    position: absolute;
    padding: 3px 10px;
    bottom: -1.6em;
    /* left: 10%; */
    right: 15px;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
    border-radius: 6px;
}
.informationIcon[data-title]:after {
    margin: 0px -80px 0px 0px;
}
.informationIconMCRList[data-title]:after {
    margin: 0px -180px 0px 0px;
}
[data-title] {
    position: relative;
}
.iconWarning[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}

.iconWarning[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
.iconWarning[data-title]::after{
    content: attr(data-title);
    background-color: #333;
    color: #fff;
    font-size: 14px;
    font-family: Raleway;
    position: absolute;
    padding: 3px 10px;
    bottom: -1.6em;
    right: -215px;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
    border-radius: 6px;
}
.iconWarning[data-title] {
    position: relative;
}
.iconCircileWarning.iconWarning[data-title]::after{
    right: -148px;
}
/* .iconWarning.fa, .iconWarning.fas{
    font-weight: 400 !important;
} */
/* END LIST */

/* .headChart.card-title{
    background-color: #007bff;
    color: white;
    border-bottom: 1px solid rgba(0,0,0,.125);
    padding: 0.75rem 1.25rem;
} */

.marginChart {
    margin-bottom: 42px;
}

/* END LIST */
/*  WAGE DETERMINATION*/
.hiddenMsjModificationNumber,
.hiddenMsjJobClassCode {
    display: none;
    padding-top: 5px;
}

/* END WAGE DETERMINATION */

/* PERSONNEL */
.checkboxApprovedProgram {
    margin-top: 12px !important;
    margin-left: -28px;
}

div[class^="optionsJobsClass_"],
div[class*=" optionsJobsClass_"] {
    display: none;
}
*[class*="hiddenApprenticeInformation_"] {
    display: none;
}
/* END PERSONNEL */

/* DASHBOARD E1 AND E2*/
.card-header.headChart {
    background-color: #007bff;
    color: white;
}

/* DASHBOARD PROJECT */

#draggablePanelList .panel-heading {
    cursor: move;
}
#draggablePanelList2 .panel-heading {
    cursor: move;
}

/* 
    REMOVE BECAUSE THIS CONTROLS IT IS NO CLEAR
.employementMetricBytheState, .employmentPersonnelGoals, .employmentWorkHourDataGraph, .contractService, .employementReport{
    display: none;
} 

*/

.columnActionsButtons{
    display: flex !important;
    justify-content: space-around !important;
    border-bottom: 0px !important;
    flex-wrap: wrap !important;
}

figure {
    border-radius: 100%;
    display: block;
    /*     height: 50px; */
    position: relative;
    /*     width: 50px; */
    margin-block-start: 0px !important;
    margin-block-end: -10px !important;
    margin-inline-start: 0px !important;
    margin-inline-end: 0px !important;
}

figure:after {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    color: #fff;
    content: attr(title);
    opacity: 0;
    padding: 6px 12px;
    position: absolute;
    left: 0%;
    top: 30px;
    transition: all 0.25s ease;
    visibility: hidden;
    white-space: nowrap;
}

figure[tooltip-dir="left"]:after {
    left: auto;
    right: 10%;
}

figure[tooltip-dir="bottom"]:after,
figure[tooltip-dir="top"]:after {
    left: 50%;
    right: auto;

    transform: translateX(-50%);
}

figure[tooltip-dir="bottom"]:after {
    bottom: auto;
    top: 10%;
}

figure[tooltip-dir="top"]:after {
    bottom: 110%;
    top: auto;
}

figure:hover:after {
    opacity: 1;
    visibility: visible;
}
/* END DASHBOARD PROJECT */

/* SIGNATURE */

/* .kbw-signature {
    width: 100%; height: 180px;
}
#signaturePad canvas{
    width: 100% !important;
    height: auto;
} */

.wrapper-signature {
    position: relative;
    width: 400px;
    height: 200px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.signature-pad {
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 200px;
    background-color: white;
}

.imageDigital {
    display: none;
}

/* END SIGNATURE */

/* TAGS */

.tagsinput {
    width: 100% !important;
}

/* END TAGS */

/* TRAINING */
.hiddenMessage {
    display: none;
}

.uploadFile {
    padding: 5px 10px;
    background: #386fb5;
    color: #fff;
    border: 0px solid #fff;
    border-radius: 7px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* .uploadFile:hover{
    color:#fff;
    background: #f7cb15;
} */

.fc-event {
    cursor: pointer;
}

/* END TRAINING */

.select-checkbox input[type="checkbox"] {
    display: none;
}

.select-checkbox input[type="checkbox"] {
    display: inline-block;
/*     width: 13px;
    height: 13px; */
    width: 20px;
    height: 20px;
    margin: 1px 4px 0 0;
    vertical-align: middle;
    background: url(radio-uncheck.png);
    background-size: cover;
    cursor: pointer;
}
table.dataTable tbody td.select-checkbox:before{
/*     margin-top: 0px !important;
    width: 9px !important;
    height: 9px !important; */
    margin-top: -3px !important;
    margin-left: -8px !important;

}
table.dataTable tr.selected td.select-checkbox:after{
    margin-top: -5px !important;
    margin-left: -8px !important;
}
.headTableCP{
    font-size: 12px;
}
.inputList{
    font-size: 12px !important;
}
.selectCheckboxTraining{
    width: 12px;
    height: 12px;
    margin: 0;
}

/* CERTIFICATION PAYROLL */
.inputFormPayroll {
    border: none;
    border-bottom: 2px solid #33e0fe;
}

#listCertificationType tr.selected td.select-checkbox:after,
#listCertificationType tr.selected th.select-checkbox:after {
    content: "\2713" !important;
    margin-top: -15px;
    margin-left: -4px;
    text-align: center;
    text-shadow: 1px 1px #b0bed9, -1px -1px #b0bed9, 1px -1px #b0bed9,
        -1px 1px #b0bed9;
}
#btoDownloadPDF {
    display: none;
}

.custom-checkbox-align {
    /* margin-top: 4px; */   /* baja el checkbox */
    transform: translateY(3px);
}

.marginInputCheckCP {
    margin-right: 8px; /* separa horizontalmente */
}
.dlfexCP{
    /* d-flex align-items-center mb-2 */
    display: flex;
    align-items: start;
    margin-bottom: 2px;

}

/* END CERTIFICATION PAYROLL */

/* BODY DASHBOARD PROJECT */

.nav-item.stepThree,
.nav-item.stepTwo,
/* .nav-item.stepPersonnel,  */
/* .nav-item.stepException, 
.nav-item.stepFringes, 
.nav-item.stepApprentice, 
.nav-item.stepStatementsOfCompliance,  */
.nav-item.stepTwoMonthlyReport {
    /* .stepTwo, .stepThree */
    display: none;
}
.stepThree,
.stepPersonnel, 

.btoStepOne {
    display: none;
}

#exampleList_length,
#listUser_length {
    display: none;
}

#listCertified tr:nth-child(Odd) {
    background-color: #fff;
}
#listCertified tr:nth-child(incluso) {
    background-color: #ccc;
    border-bottom: 1px solid #c00;
}

#divCertifiedView {
    overflow: scroll;
    /*      height:200px;
     width:500px; */
    /*     height: 100%; */
    width: 100%;
    height: auto;
    word-wrap: break-word;
}
#divCertifiedView table {
    width: 100%;
    background-color: lightgray;
}
#divCertified {
    display: none;
    overflow: scroll;
    /*      height:200px;
     width:500px; */
    height: 100%;
    width: 100%;
}
#divCertified table {
    width: 100%;
    background-color: lightgray;
}

.spanRelationshipManyToMany {
    text-align: left;
    padding-top: 5px;
}

.hiddenSubMenu {
    display: none;
}
.imageHeadVerificationForm {
    padding-top: 20px;
    width: 75px;
    height: 42px;
}
.imageHeadVerificationFormModal{
    padding-top: 14px;
    width: 20px;
    height: 34px;
    margin-bottom: 20px;
}
.titleVerificationForm,
.contentVerificationFormBold {
    font-family: "Roboto_Bold";
}
.titleVerificationForm {
    font-size: 24px;
}
.contentVerificationFormBold {
    font-size: 14px;
}

.contentVerificationFormRegular {
    font-family: "Roboto_Regular";
    font-size: 14px;
}
.alignItemRowVerificationForm {
    align-items: baseline;
    margin-top: 6px;
}
.inputVerificationForm {
    height: 20px;
}
.inputVerificationFormTradeCategory {
    top: 0px !important;
    height: auto !important;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-shadow: inset 0 0 0 transparent;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.inputWorkProduct {
    display: none;
}
.paddingCardBody {
    padding: 0 !important;
}

.imageDashboardProject {
/*     width: 100%;
    height: 20%; */
    width: 120px;
    height: 200px;
    border-radius: 4%;
}
.imageDashboardProjectStatic {
        width: 100%;
        height: 200px;
        border-radius: 4%;
    }

.textTitleCard {
    font-family: "Abel_Regular";
    font-size: 20px;
}

.textTitleProject {
    font-family: "Alata_Regular";
    font-size: 25px;
}

.textDashboard {
    font-family: "Abel_Regular";
    font-size: 18px;
}

.card{
    min-width: fit-content;
}

.cardTextLabel,
.cardTextData,
.cardTextDataTwo {
    font-family: "Abel_Regular";
    font-size: 18px;
}

.cardTextLabel {
    color: #612529;
}

.cardTextData {
    color: #6c75a7;
}

.cardTextDataRed {
    color: #ff0303;
}

.cardTextDataTwo {
    color: #9d480d;
}

.cardTextTitle,
.cardTextSubTitle {
    font-family: "Alata_Regular";
    color: #612529;
}

.cardTextTitle {
    font-size: 18px;
}

.cardTextSubTitle {
    font-size: 14px;
}

.headTableDashboardProject {
    background-color: #6c75a7;
    color: white;
}

.card-primary.card-outline-tabs .card-header.borderColorNav a.active {
    border-top: 3px solid #228e3b;
}

.colorIconFolder {
    color: #386fb5;
}

/* .mycontent-right {
    border-left: 1px solid #333;
} */

/* .border-right {
    border-right: 1px solid #ddd;
} */

.borders {
    border-left: 1px solid #ddd;
    /*     border-right: 1px solid #ddd; */
    margin: -1px;
}

/* .border-left {
    border-left: 1px solid #ddd;
} */

/* .contentInformationHierarchicalTree {
    margin-top: 25px;
}
 */

/* .textHierarchical {
    font-family: "Roboto_Bold" !important;
    text-decoration-line: underline;
    font-size: 18px !important;
}
.textContentHierarchical {
    font-family: "Roboto_Regular" !important;
    font-size: 15px !important;
} */

/* .callout.callout-test {
    border-left-color: green;
} */

.callout.colorBase {
    border-left-color: #df715e;
}

.headHierarchicalTree {
    display: none;
}

.svgHierarchicalTree {
    width: 18px;
    height: 18px;
}

/* END DASHBOARD PROJECT */

/* PROJECT GOAL */
.hiddenError {
    display: none;
}
/* END PROJECT GOAL */

/* HOME */
.companySelected{
    color: white;
    font-size: 1.2em;
    text-align: center;
}


.alignIconMenu{
    right: 1rem !important;
}

.btn-container-menu {
    left: 8px;
}

.page-link {
    height: 30px;
}

.small-box {
    padding: 10px;
}

.inner-icon {
    height: auto;
    width: 93px;
    padding: 14px 12px 13px 6px;
    border-radius: 4px;
}

#projects-home {
    background-color: rgb(32, 201, 151);
    height: auto;
    width: 93px;
    padding: 14px 12px 13px 6px;
    border-radius: 4px;
}

#chart-home {
    background-color: #dc3445;
    height: auto;
    width: 93px;
    padding: 14px 12px 13px 6px;
    border-radius: 4px;
}

#folder-home {
    background-color: rgb(252, 192, 13);
}

#smallbox3,
#smallbox2,
#smallbox1 {
    background-color: white !important;
}

.inner,
.innerTitle,
.innerContent {
    color: black;
}

.innerTitle {
    font-family: "Roboto_Regular";
    font-size: 20px !important;
}

.innerContent {
    font-family: "Roboto_Bold";
    font-size: 24px !important;
}

/* END HOME */

/* END FONT  */

.titleModule {
    font-family: "Roboto_Bold";
    font-size: 18px;
    color: black;
}

.imageErrorsTabs {
    width: 15px;
    height: 15px;
    margin-bottom: 4px;
    margin-left: 10px;
}

/* LIST */

.pagination {
    justify-content: flex-end;
    font-family: "Roboto_Regular";
    font-size: 10px;
}

.pagination .page-item.active .page-link {
    background-color: #007bff !important;
    color: white !important;
    border-color: #007bff;
}

.pagination .page-link {
    background-color: white !important;
    color: #007bff !important;
    outline: none;
    box-shadow: none;
}

.page-link.colorPink {
    text-decoration: none !important;
    color: #ff3366 !important;
    padding: 8px;
}

.pagination .fas {
    line-height: 1.25;
}

.iconList,
.iconListPdf,
.iconListExcel,
.iconListPrint,
.iconListRefresh {
    width: 60px;
    height: 35px;
    padding: 6px 6px 6px 6px;
    margin-left: 3px;
    border-radius: 10%;
}

.iconListPdf {
    background-color: #007bff;
}

.iconListExcel {
    background-color: #28a745;
}

.iconListPrint {
    background-color: #1775a9;
}

.iconListRefresh {
    background-color: #f2f2f2;
}

.marginRight {
    margin-right: 0px !important;
}

/* END LIST */

/* MODAL */


.deleteLine {
    border-top: none !important;
}

.borderHeader {
    border-bottom: none !important;
}

.hiddenObservationCompany {
    display: none;
}

/* END MODAL */
/* CONTRACT */
.ulContract{
    list-style:none;
}
.ulContract ul, li, ul li{
    list-style:none;
}
/* END CONTRACT */
/* REPORT MONTHLY CONTRACTOR */
.uploadChangeOrderSave,
.iconFileMonthlyReportWord,
.iconFileMonthlyReportPdf,
.iconFileMonthlyReportExcel,
.textFileMonthlyReportWord,
.textFileMonthlyReportPdf,
.textFileMonthlyReportExcel,
.fileMonthlyReport {
    display: none;
}

/*
.goal-1,
.goal-2,
.goal-3,
.goal-4,
.goal-5,
.goal-6,
.goal-7,
.goal-8,
.goal-9,
.goal-10,
.rmone{
    display:none
        } */
/* END REPORT */
/* COMPANY */

.svgListCompany {
    margin-top: 5px;
}

.project-1,
.project-2,
.project-3,
.project-4,
.project-5,
.project-6,
.project-7,
.project-8,
.project-9,
.project-10,
.project-11,
.project-12,
.project-13,
.project-14,
.project-15,
.project-16,
.project-17,
.project-18,
.project-19,
.project-20,
.project-21,
.project-22,
.project-23,
.project-24,
.project-25,
.project-26,
.project-27,
.project-28,
.project-29,
.project-30,
.project-31,
.project-32,
.project-33,
.project-34,
.project-35,
.project-36,
.project-37,
.project-38,
.project-39,
.project-40,
.rmone {
    display: none;
}

.textOverline {
    text-decoration: line-through;
}

/* END COMPANY */
/* PROJECT */

.goal-1,
.goal-2,
.goal-3,
.goal-4,
.goal-5,
.goal-6,
.goal-7,
.goal-8,
.goal-9,
.goal-10,
.goal-11,
.goal-12,
.goal-13,
.goal-14,
.goal-15,
.goal-16,
.goal-17,
.goal-18,
.goal-19,
.goal-20,
.goal-21,
.goal-22,
.goal-23,
.goal-24,
.goal-25,
.goal-26,
.goal-27,
.goal-28,
.goal-29,
.goal-30,
.goal-31,
.goal-32,
.goal-33,
.goal-34,
.goal-35,
.goal-36,
.goal-37,
.goal-38,
.goal-39,
.goal-40,
.goal-41,
.goal-42,
.goal-43,
.goal-44,
.goal-45,
.goal-46,
.goal-47,
.goal-48,
.goal-49,
.goal-50,
.goal-51,
.goal-52,
.goal-53,
.goal-54,
.goal-55,
.goal-56,
.goal-57,
.goal-58,
.goal-59,
.goal-61,
.goal-62,
.goal-63,
.goal-64,
.goal-65,
.goal-66,
.goal-67,
.goal-68,
.goal-69,
.goal-70,
.goal-71,
.goal-72,
.goal-73,
.goal-74,
.goal-75,
.goal-76,
.goal-77,
.goal-78,
.goal-79,
.goal-80,
.goal-81,
.goal-82,
.goal-83,
.goal-84,
.goal-85,
.goal-86,
.goal-87,
.goal-88,
.goal-89,
.goal-90,
.goal-91,
.goal-92,
.goal-93,
.goal-94,
.goal-95,
.goal-96,
.goal-97,
.goal-98,
.goal-99,
.goal-100,
.goal-101,
.goal-102,
.goal-103,
.goal-104,
.goal-105,
.goal-106,
.goal-107,
.goal-108,
.goal-109,
.goal-110,
.goal-111,
.goal-112,
.goal-113,
.goal-114,
.goal-115,
.goal-116,
.goal-117,
.goal-118,
.goal-119,
.goal-120,
.goal-121,
.goal-122,
.goal-123,
.goal-124,
.goal-125,
.goal-126,
.goal-127,
.goal-128,
.goal-129,
.goal-130,
.goal-131,
.goal-132,
.goal-133,
.goal-134,
.goal-135,
.goal-136,
.goal-137,
.goal-138,
.goal-139,
.goal-140,
.goal-141,
.goal-142,
.goal-143,
.goal-144,
.goal-145,
.goal-146,
.goal-147,
.goal-148,
.goal-149,
.goal-150,
.goal-151,
.goal-152,
.goal-153,
.goal-154,
.goal-155,
.goal-156,
.goal-157,
.goal-158,
.goal-159,
.goal-160,
.goal-161,
.goal-162,
.goal-163,
.goal-164,
.goal-165,
.goal-166,
.goal-167,
.goal-168,
.goal-169,
.goal-170,
.rmone {
    display: none;
}

.goal-employment-1,
.goal-employment-2,
.goal-employment-3,
.goal-employment-4,
.goal-employment-5,
.goal-employment-6,
.goal-employment-7,
.goal-employment-8,
.goal-employment-9,
.goal-employment-10,
.rmone_employment {
    display: none;
}

.hiddenImageGeneral,
.hiddenImageFringes,
.hiddenImageOthers,
.hiddenImageContac,
.hiddenImageOther,
.hiddenImageDetails,
.hiddenImageTracking,
.hiddenImageOtherInformation,
.hiddenImageStep3,
.hiddenFormImageGeneral {
    display: none;
}

.alignIcon {
    padding-top: 10px;
}

/* LIST */

tr.group,
tr.group:hover {
    background-color: #ddd !important;
}



#proxyUserModal {
    z-index: 1060 !important; 
  }
#proxyUserModal.modal {
    z-index: 1060 !important;
  }
  #proxyUserModal .modal-dialog,
  #proxyUserModal .modal-content {
    z-index: 1061 !important;
  }
  #proxyUserModal ul {
    
    padding-left: 20px;    
    margin: 0;
}

#proxyUserModal ul li {
    list-style-type: disc; 
    padding: 5px 0;
    font-size: 14px;
    color: #333;
} 
/* END */

/* CREATED USER */
/* .btnIconDisapprove, .btnIconApprove{
    display: none;
}
 */

.iconsUserList {
    width: 8px;
    height: 8px;
}

.iconsPng {
    width: 18px;
    height: 18px;
}

.userImage {
    width: 35px;
    height: 35px;
}

.textFirstName,
.textSecondLine,
.textLastName,
.textProject {
    font-family: "Roboto_Regular";
    font-size: 14px;
}

.textProject {
    color: #612529;
}

.textLastName {
    font-family: "Roboto_Bold";
}

.contractUser,
.projectUser {
    display: none;
}

.searchUserAlert {
    display: none;
}

.marginInputCheck {
    margin-top: 11px !important;
}

.myClassic {
    background-color: white;
    /*    border: thin solid blue; */
    border-radius: 3px;
    display: inline-block;
    font-family: "Roboto_Regular";
    font-size: 14px;
    padding: 0.3em 1.9em 0.3em 0.8em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.myClassic {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA3klEQVRIS+3VMU9CMRTF8d8zBL+aizoQFhx0kUk33RzdYMNFXUFnYeGrYYyaJiUxJHDLSxodbNKpfeffc9/pbaPyaCrr+3OA++z4rtT5Pg5GuMnCY9yWQEoBE1xhlUUP8YDrCBIB0vojLvGO0yz4hm4JJAKcYYoPHGOZAUdYoIMBXrc5iQAHeMlzviFygj7O8dkWEJU4XI8chALRhn9AVKHf70VRTHu4wFfbmKZLNKt50dLBnna0imcMd/2I0phWa3Y/D1e1Xa9BCZJG0VuQNpaWKMx72xS1Fl5/WN3BN+AgJhnZQlq4AAAAAElFTkSuQmCC");
    background-position: calc(100% - 0.5rem), 100% 0;
    background-size: 1.5em 1.5em;
    background-repeat: no-repeat;
}

.myClassic:focus {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA3klEQVRIS+3VMU9CMRTF8d8zBL+aizoQFhx0kUk33RzdYMNFXUFnYeGrYYyaJiUxJHDLSxodbNKpfeffc9/pbaPyaCrr+3OA++z4rtT5Pg5GuMnCY9yWQEoBE1xhlUUP8YDrCBIB0vojLvGO0yz4hm4JJAKcYYoPHGOZAUdYoIMBXrc5iQAHeMlzviFygj7O8dkWEJU4XI8chALRhn9AVKHf70VRTHu4wFfbmKZLNKt50dLBnna0imcMd/2I0phWa3Y/D1e1Xa9BCZJG0VuQNpaWKMx72xS1Fl5/WN3BN+AgJhnZQlq4AAAAAElFTkSuQmCC");
    background-position: calc(100% - 0.5rem), 100% 0;
    background-size: 1.5em 1.5em;
    background-repeat: no-repeat;
    border-color: grey;
    outline: 0;
}

/* END CREATED USER */

/* LICENSE */

.backgroundCard {
    background-color: transparent !important;
}

.alignBackgroundCard {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contentLicense {
    font-family: "Roboto_Regular";
    font-size: 14px;
    color: #a3adae;
    line-height: 35px;
}

.titleLicense {
    font-family: "Roboto_Bold";
    font-size: 24px;
    padding-left: 28px;
    padding-right: 15px;
}

.textLicenseCheck {
    font-family: "Roboto_Regular";
    font-size: 16px;
    color: black;
}

/* END LICENSE */

/* strength Password */

.button_strength {
    position: absolute;
    top: 7px;
    right: 15px;
}

.strength_meter {
    margin-bottom: 13px;
    float: right;
    background-color: transparent !important;
}

/* end Password */


.custom-popup-certification-company-document-list{
    width: 36em !important;
}



.colorYellow {
    background-color: #f1b746;
    color: black;
    margin-right: 30px;
}

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel,
.swal2-deny {
    width: 150px !important;
    border-radius: 27px !important;
}



.swal2-styled.swal2-confirm:focus,
.swal2-styled.swal2-cancel:focus {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.stateToAssemble {
    padding: 4px;
    color: white;
    background-color: #8f0621;
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.stateAssemblingRequest {
    padding: 4px;
    color: white;
    background-color: #f1b746;
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.stateReadyToSend {
    padding: 4px;
    color: white;
    background-color: #4169e1;
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.stateSent {
    padding: 4px;
    color: white;
    background-color: #ff3366;
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.stateReceivedOk {
    padding: 4px;
    color: white;
    background-color: #72c279;
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.stateReceivedFail {
    padding: 4px;
    color: white;
    background-color: #dc143c;
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.swal2-header .swal2-title {
    font-family: "Roboto_Bold";
}

.swal2-header #swal2-content {
    font-family: "Roboto_Regular";
}

.changeSelect {
    margin-bottom: 0 !important;
    font-size: 14px;
    padding: 2px;
    margin-top: 6px !important;
    width: 38px;
}

/* #timeCook{
    text-align: left !important;

}
#timeCook span{
    border: 1px solid #33E0FE !important;
}
 */

#listIngredientRecipe {
    width: 748px !important;
}

.main-footer {
    border-top: none !important;
    background-color: #07324B;
    padding: 0px;

}

.iconsDashboardProject {
    fill: rgba(0, 0, 0, 0.2);
}

.colorCardDashboard {
    background-color: #148ea2;
}

.colorCardProjectDetails {
    background-color: #228e3b;
}

.colorCardCertifiedPayroll {
    background-color: #4482a7;
}

.colorCardReporting {
    background-color: #d9a406;
}

.colorCardDocumentLibrary {
    background-color: #bb2d3b;
}

.alignInner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.colorLabel,
.colorLabelHeaderModal,
.colorLabelTextModal,
.colorCardDashboardProject {
    font-family: "Roboto_Regular";
    font-size: 14px;
    color: #a4adb3;
}

.colorCardDashboardProject {
    color: white;
}

.colorLabelHeaderModal {
    font-family: "Roboto_Bold";
    font-size: 18px;
    color: black;
}

.colorLabelTextModal {
    color: #484849;
}

.colorLabelDelete {
    font-family: "Roboto_Regular";
    font-size: 14px;
    color: black;
}

.colorLabelOnly {
    font-family: "Roboto_Regular";
    font-size: 14px;
    color: #808080;
    text-align: left;
}

.inputFormDatePicker {
    padding: 8px 8px 4px 8px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin-bottom: 25px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: "Roboto_Regular";
    font-size: 14px;
    background-color: transparent;
}

.colorInput,
.selectColorInput + span {
    padding: 8px 8px 4px 8px;
    /*     border: 1px solid #33e0fe !important; */
    border-radius: 6px;
    margin-bottom: 25px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: "Roboto_Regular";
    font-size: 14px;
    background-color: transparent;
}

.selectColorInput + span {
    padding: 0;
}

.selectColorInputCart + span {
    margin-bottom: 0;
}

.separateBto {
    margin: 0px 30px 0px 30px;
}

.wrapper .content-wrapper {
    padding-top: 3%;
}

.form-control {
    height: auto;
}

input:focus,
input.form-control:focus {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

button:focus {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.fontLoginAdmin {
    font-family: "Breeserif_Regular" !important;
    font-size: 50px;
    margin-left: 0%;
}

.loginAdmin {
    margin: 50px 0px;
}

.fontLabelLoginAdmin {
    font-family: "Roboto_Regular" !important;
    font-size: 15x;
    color: #aaa;
}

.borderLoginAdmin {
    width: 100%;
    height: 80%;
    border: 1px solid #aaa;
    border-radius: 20px;
    /*     -webkit-box-shadow: 6px 7px 5px 0px rgba(212, 212, 212, 1);
    -moz-box-shadow: 6px 7px 5px 0px rgba(212, 212, 212, 1);
    box-shadow: 6px 7px 5px 0px rgba(212, 212, 212, 1);

    margin-top: 3%;
    margin-right: 6%; */
}

.boxImage {
    margin-top: 3%;
}

.imageBox {
    width: 100%;
    height: 150px;
    border-radius: 20px;
}

.demo input[type="checkbox"] {
    display: none;
}

.demo input[type="checkbox"] {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 1px 4px 0 0;
    vertical-align: middle;
    background: url(radio-uncheck.png);
    background-size: cover;
    cursor: pointer;
}

.demo input[type="radio"]:checked {
    background: url(radio-check.png);
    background-size: cover;
}

.btn:focus,
.btn.focus {
    outline: 0;
    box-shadow: none;
}

.formInput {
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    color: #ffffff;
}

.formInputFondoLeft {
    background-color: white;
    color: white;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: 0;
}

.formInputFondoRight {
    background-color: white;
    color: white;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left: 0;
}

.sacarBordeLeftRight {
    border-left: 0;
    border-right: 0;
    padding-bottom: 10px;
}

.sacarBordeRight {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    border-left: 0;
    padding-bottom: 10px;
}

.sacarBordeLeft {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    border-right: 0;
    padding-bottom: 10px;
}

.colorButton {
    width: 100%;
    font-family: "Roboto_Regular" !important;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 20px;
    color: #ffffff;
    background-color: #ff3366;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 0;
}

.colorButtonGrupLogin {
    width: 100%;
    background-color: #ff3366;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    outline: none;
    margin-bottom: 36px;
}

/* .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
.dropdown-toggle::after {
    display: none;
}
.note-editor .dropdown-toggle::after {
    display: inline-block;
} */

.takeStyle a:hover {
    text-decoration: none;
}

.takeStyle a:link {
    text-decoration: none;
}

.takeStyle a:active {
    text-decoration: none;
}

.takeStyleLogin a:link {
    text-decoration: none;
}

.takeStyleLogin a:active {
    text-decoration: none;
}

#inputIngredientNotBorder {
    padding: 0 !important;
    border: 1px solid #ccc !important;
    background-color: white !important;
    border-radius: 0px !important;
    width: 80% !important;
    /*     box-sizing: border-box; */
    font-family: "Roboto_Regular" !important;
    font-size: 14px !important;
}

.containerRecipe {
    width: 40px;
    margin: 0 auto;
}

.imgRecipeList {
    position: relative;
    padding-bottom: 100%;
    /* 16:9 */
    height: 0;
}

.imgRecipeList img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.paddBto {
    padding: 0px 8px 0px 8px;
}

#listUser,
#exampleList,
#listCategory,
#listSubcategory,
#listCompany,
#menuText,
.labelText {
    font-family: "Roboto_Regular" !important;
    font-size: 15px;
}

.labelText {
    padding-left: 12px;
}

.inputSearch,
.inputSearchPersonalice {
    padding: 0.3em 1.9em 0.3em 0.8em;
    border: 1px solid gray;
    border-radius: 3px;
    margin-bottom: 25px;
    margin-top: 3px;
    width: 70%;
    box-sizing: border-box;
    font-family: "Roboto_Regular";
    font-size: 14px;
}

.inputSearchPersonalice {
    width: 100%;
}

.rowFixed {
    margin: 100px 0px 0px 0px;
}

.colorCyan,
.colorCyanListCart {
    font-family: "Roboto_Regular";
    background-color: #33e0fe;
    color: #2c3e50;
    margin-right: 30px;
    padding: 0.3em 1em 0.3em 1em !important;
}

.colorCyanBottomUpload {
    font-family: "Roboto_Regular";
    background-color: #33e0fe;
    color: #2c3e50;
    margin-top: -4px;
    padding-top: 3px;
}

.colorCyanListCart {
    margin-right: 0;
    margin-top: 3px;
}

.colorBlack,
.colorBlackListCart {
    font-family: "Roboto_Regular";
    background-color: #2c3e50;
    color: white;
}

.colorBlackListCart {
    margin-top: 3px;
}

/* .headerModel {
    background-color: rgba(0, 0, 0, 0.05);
} */

/* DATA TABLE */

.row-danger {
    background-color: #ffccccc2 !important; 
}

#listUser_wrapper .row:nth-child(1) > div:nth-child(1),
#listCategory_wrapper .row:nth-child(1) > div:nth-child(1),
#listSubcategory_wrapper .row:nth-child(1) > div:nth-child(1),
#exampleList_wrapper .row:nth-child(1) > div:nth-child(1) {
    display: none;
}

#listUser_wrapper .row:nth-child(1) > div:nth-child(2),
#exampleList_wrapper .row:nth-child(1) > div:nth-child(2),
#listCategory_wrapper .row:nth-child(1) > div:nth-child(2),
#listSubcategory_wrapper .row:nth-child(1) > div:nth-child(2) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.dataTables_processing{
        position:absolute;
        inset: 0 0 0 0;
        margin: 0 auto;
        font-size:2.5rem;
        font-weight:bold;
        color:#008af3;
        border:2px solid #008af3;
        border-radius:10px;
        background-color: hsl(0, 0%, 12%, .2);
        text-shadow: -1px -1px 4px hsla(0, 0%, 100%, 1);
        backdrop-filter: blur(2px);
        transition: all 150ms;
        text-align : center;
}

#listUser_wrapper .row:nth-child(1) > div:nth-child(2) .dataTables_filter label,
#exampleList_wrapper
    .row:nth-child(1)
    > div:nth-child(2)
    .dataTables_filter
    label,
#listCategory_wrapper
    .row:nth-child(1)
    > div:nth-child(2)
    .dataTables_filter
    label,
#listSubcategory_wrapper
    .row:nth-child(1)
    > div:nth-child(2)
    .dataTables_filter
    label {
    width: 100%;
    text-align: left;
}

#listFundingSource_procetablessing{
            position:absolute;
            inset: 0 0 0 0;
            margin:0 auto;
            font-size:3rem;
            font-weight:bold;
            color:#008af3;
            border:2px solid #008af3;
            border-radius:10px;
            padding:.5rem;
            display: grid;
            place-items: center;
            background-color: hsl(0, 0%, 12%, .2);
            backdrop-filter: blur(4px);
            transition: all 150ms;
            text-align : center;
}


table tr.lines td {
    padding-left: 0 !important;
    padding-bottom: 0 !important;
} */

.btnIcons {
    padding: 0px;
}

/* MODIFY BUTTON SWITCH  */

.custom-switch.custom-switch-on-success
    .custom-control-input:checked
    ~ .custom-control-label::before {
    background: #33e0fe;
    border-color: #33e0fe;
    width: 2.75rem;
    height: 1.25rem;
    border-radius: 1rem;
}

.custom-switch.custom-switch-on-success
    .custom-control-input:checked
    ~ .custom-control-label::after {
    background: white;
    width: calc(1.25rem - 4px);
    height: calc(1.25rem - 4px);
    border-radius: 1rem;
}

.custom-switch.custom-switch-off-danger
    .custom-control-input
    ~ .custom-control-label::before {
    background: #c2c7d0;
    border-color: #c2c7d0;
    width: 2.75rem;
    height: 1.25rem;
    border-radius: 1rem;
}

.custom-switch.custom-switch-off-danger
    .custom-control-input
    ~ .custom-control-label::after {
    background: white;
    width: calc(1.25rem - 4px);
    height: calc(1.25rem - 4px);
    border-radius: 1rem;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(1.5rem);
}

.custom-switch {
    margin-right: -9px !important;
    padding-left: 3.25rem;
    padding-top: 5px;
}
.nav-header-menu{
    color: white;
    font-size: 20px;
    padding: 10px 0px 10px 0px;
    text-align: center;
}


.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.container-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-open {
    display: flex;
    width: 700px;
    /*     border: 2px solid red; */
    display: flex;
    justify-content: space-between;
}

.search-open .tab-search {
    width: 50%;
    text-align: center;
}

.search-open .tab-search.active {
    border-bottom: 2px solid #d0911a;
    /*     width: 50%; */
    align-content: center;
}

.container-links {
    /*     border: 2px solid red; */
    min-height: 100px;
}

.container-links .links {
    display: none;
}

.container-links .links.active {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.container-button {
    position: relative;
}

/* .menu {
margin-top: 9%;
display: none;
position: absolute;
width: 700px;
border: 1px solid #aaa;
background-color: #F2F2F2;
}

.menu.active {
    background-color: #F2F2F2;
display: block;
}
 */

.button-search {
    font-family: "Roboto_Bold" !important;
    width: 100%;
    font-size: 20px;
    color: #ffffff;
    background-color: #d0911a;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    outline: none;
    border: 0;
}

.endStep fieldset {
    display: block !important;
    opacity: 1 !important;
}

.endStep fieldset .hiddeBto {
    display: none !important;
}

.endStep fieldset .disableInput {
    pointer-events: none;
}

.errorSelect {
    display: none;
    color: red !important;
}

.errorForm ~ .errorSelect {
    display: block;
}

.addIngredient {
    display: none;
    color: red;
}

.errorForm {
    border-color: red !important;
}
.inputInvalidError{
    color: hsl(0, 100%, 50%);
    font-size: .9rem;
    height: 1rem!important;
}

.fa-minus-circle, .fa-plus-circle {
    cursor: pointer !important;
}
.fa-minus-circle:hover, .fa-plus-circle:hover{
    color: #0069da !important;
}
.row .errorRow{
    height: 1rem !important;
}
input.specialErrorFlex + .inputInvalidError { /*This is to be aplied on errors that are on special cases iin flex displays */
    left: .5rem;
}

@media (max-width: 1199px) {
    .carouselBootstrap {
        margin-top: 90px;
    }
    .fontBannerTitulo {
        font-family: "Breeserif_Regular" !important;
        font-size: 40px;
        color: #d0911a;
    }
    .fontBannerText {
        font-family: "Roboto", sans-serif !important;
        font-size: 30px;
        font-weight: bolder;
    }
    .imagenFlat {
        width: 50px;
        height: 34px;
    }
}

@media (max-width: 991px) {
    .classLogo {
        z-index: 10;
        position: absolute;
        top: -22%;
        width: 100%;
    }
    .inputSerach {
        padding-left: 52px;
        margin-top: 6px;
    }
    .fontMd {
        font-size: 13px !important;
    }
    .imagenAvatar {
        vertical-align: center;
    }
    .imagenRedesSociales {
        width: 32px;
        height: 32px;
    }
    .colRedesSociales {
        display: flex !important;
    }
    .fontBannerTitulo {
        font-family: "Breeserif_Regular" !important;
        font-size: 28px;
        color: #d0911a;
    }
    .fontBannerText {
        font-family: "Roboto", sans-serif !important;
        font-size: 25px;
        font-weight: bolder;
    }
    .carouselBootstrap {
        margin-top: 84px;
    }
    .imgRedonded {
        border-radius: 250px;
        width: 300px;
        height: 97px;
    }
    .imagenCuadrada {
        width: 100%;
        height: 300px;
    }
    .tituloRecetas {
        font-size: 16px;
    }
    .contenidoRecetas {
        font-size: 14px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
    .imagenFooter {
        height: 400px;
    }
}

@media (max-width: 767px) {
    .classLogo {
        z-index: 10;
        position: absolute;
        top: -10%;
        width: 100%;
    }
    .colRedesSociales {
        display: none !important;
    }
    .fontBannerTitulo {
        font-family: "Breeserif_Regular" !important;
        font-size: 24px;
        color: #d0911a;
    }
    .fontBannerText {
        font-family: "Roboto", sans-serif !important;
        font-size: 20px;
        font-weight: bolder;
    }
    .carouselBootstrap {
        margin-top: 78px;
    }
    .imgRedonded {
        border-radius: 250px;
        width: 300px;
        height: 72px;
        margin-top: 15%;
    }
    .imagenCuadrada {
        width: 100%;
        height: 200px;
    }
    .tituloRecetas {
        font-size: 16px;
    }
    .contenidoRecetas {
        font-size: 14px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
    .imagenFooter {
        height: 300px;
    }
}

@media (max-width: 575px) {
    .classLogo {
        z-index: 10;
        position: absolute;
        top: -12%;
        width: 100%;
    }
    .colRedesSociales {
        display: none !important;
    }
    .fontBannerTitulo {
        font-family: "Breeserif_Regular" !important;
        font-size: 23px;
        color: #d0911a;
    }
    .fontBannerText {
        font-family: "Roboto", sans-serif !important;
        font-size: 20px;
        font-weight: bolder;
    }
    .carouselBootstrap {
        margin-top: 72px;
    }
    .imgRedonded {
        border-radius: 250px;
        width: 300px;
        height: 72px;
        margin-top: 15%;
    }
    .imagenCuadrada {
        width: 100%;
        height: 100px;
    }
    .tituloRecetas {
        font-size: 16px;
    }
    .contenidoRecetas {
        font-family: "Roboto_Regular" !important;
        font-size: 14px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
    .imagenFooter {
        height: 300px;
    }
}

@media (min-width: 1400px) {
    .imgRedonded {
        border-radius: 250px;
        padding: 10px;
        border-color: darkgoldenrod;
        width: 300px;
        height: 275px;
    }
    .classLogo {
        z-index: 10;
        position: absolute;
        top: -97%;
        width: 100%;
    }
    .alinearContenido {
        margin-left: 3%;
        margin-top: 274px;
    }
    .fontBannerTitulo {
        font-family: "Breeserif_Regular" !important;
        font-size: 78px;
        color: #d0911a;
        margin-left: 1%;
    }
    .fontBannerText {
        font-family: "Breeserif_Regular";
        font-size: 56px;
        margin-left: 1%;
        /*     font-weight: bolder; */
    }
    .imagenFooter {
        margin-top: 5%;
        width: 100%;
        height: 850px;
    }
    .imageFloatFooter {
        width: 100%;
        height: 455px;
    }
    .menu {
        margin-top: 9px;
        display: none;
        position: absolute;
        width: 700px;
        border: 1px solid #aaa;
        background-color: #ffffff;
    }
    .story img {
        width: 270px;
        /*     border-radius:50%; */
        position: absolute;
        border-radius: 250px;
        padding: 10px;
        border-color: darkgoldenrod;
        top: 143px;
        left: 158px;
        transform: translate(-50%, -50%);
    }
    .loginAdmin {
        margin: 80px 0px;
    }
    .imageBox {
        height: 750px;
    }
    .colorButtonGrupLogin {
        margin-bottom: 111px;
        margin-top: 115px;
    }
}

#myTabRecipe .nav-item a {
    color: #333;
}

#myTabRecipe .nav-link.active {
    color: black !important;
    border-top-color: #33e0fe !important;
    border-top-width: 5px !important;
}

#myCardRecipe.card {
    border: 0px solid #ccc;
    border-radius: 0px;
    border-top: 0px solid red !important;
    box-shadow: none;
}

#myTabContent {
    border: 1px solid #ccc;
    border-top: none;
}

body .pizza {
    height: 20vmin;
    width: 20vmin;
    align-items: center;
    background: none;
    position: relative;
    -webkit-animation: rotate 13s linear infinite;
    animation: rotate 13s linear infinite;
}

@-webkit-keyframes rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

body .pizza .slice {
    z-index: -1;
    overflow: visible;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10vmin 2.75vmin 0 2.75vmin;
    border-color: #ffdc73 transparent transparent transparent;
    left: 7vmin;
    top: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation: loading 1.5125s ease-in-out infinite;
    animation: loading 1.5125s ease-in-out infinite;
}

@-webkit-keyframes loading {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    99% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes loading {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    99% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

body .pizza .slice:nth-of-type(2n):after {
    box-shadow: 0.5vmin 2.5vmin 0 #cc333f;
}

body .pizza .slice:nth-of-type(4n):after {
    box-shadow: 0.5vmin 2.5vmin 0 #cc333f, 1.5vmin 5vmin 0 #cc333f;
}

body .pizza .slice:nth-of-type(1) {
    -webkit-transform: rotate(-27.75deg);
    transform: rotate(-27.75deg);
    -webkit-animation-delay: -0.0625s;
    animation-delay: -0.0625s;
}

body .pizza .slice:nth-of-type(2) {
    -webkit-transform: rotate(-55.5deg);
    transform: rotate(-55.5deg);
    -webkit-animation-delay: -0.125s;
    animation-delay: -0.125s;
}

body .pizza .slice:nth-of-type(3) {
    -webkit-transform: rotate(-83.25deg);
    transform: rotate(-83.25deg);
    -webkit-animation-delay: -0.1875s;
    animation-delay: -0.1875s;
}

body .pizza .slice:nth-of-type(4) {
    -webkit-transform: rotate(-111deg);
    transform: rotate(-111deg);
    -webkit-animation-delay: -0.25s;
    animation-delay: -0.25s;
}

body .pizza .slice:nth-of-type(5) {
    -webkit-transform: rotate(-138.75deg);
    transform: rotate(-138.75deg);
    -webkit-animation-delay: -0.3125s;
    animation-delay: -0.3125s;
}

body .pizza .slice:nth-of-type(6) {
    -webkit-transform: rotate(-166.5deg);
    transform: rotate(-166.5deg);
    -webkit-animation-delay: -0.375s;
    animation-delay: -0.375s;
}

body .pizza .slice:nth-of-type(7) {
    -webkit-transform: rotate(-194.25deg);
    transform: rotate(-194.25deg);
    -webkit-animation-delay: -0.4375s;
    animation-delay: -0.4375s;
}

body .pizza .slice:nth-of-type(8) {
    -webkit-transform: rotate(-222deg);
    transform: rotate(-222deg);
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

body .pizza .slice:nth-of-type(9) {
    -webkit-transform: rotate(-249.75deg);
    transform: rotate(-249.75deg);
    -webkit-animation-delay: -0.5625s;
    animation-delay: -0.5625s;
}

body .pizza .slice:nth-of-type(10) {
    -webkit-transform: rotate(-277.5deg);
    transform: rotate(-277.5deg);
    -webkit-animation-delay: -0.625s;
    animation-delay: -0.625s;
}

body .pizza .slice:nth-of-type(11) {
    -webkit-transform: rotate(-305.25deg);
    transform: rotate(-305.25deg);
    -webkit-animation-delay: -0.6875s;
    animation-delay: -0.6875s;
}

body .pizza .slice:nth-of-type(12) {
    -webkit-transform: rotate(-333deg);
    transform: rotate(-333deg);
    -webkit-animation-delay: -0.75s;
    animation-delay: -0.75s;
}

body .pizza .slice:before {
    content: "";
    position: absolute;
    height: 1.5vmin;
    width: 6vmin;
    background: #bbb083;
    top: -10.5vmin;
    left: -3vmin;
    border-radius: 100vmin 100vmin 0.5vmin 0.5vmin / 50vmin 50vmin;
}

body .pizza .slice:after {
    content: "";
    border-radius: 100%;
    position: absolute;
    width: 1.25vmin;
    height: 1.25vmin;
    background: #cc333f;
    left: -1vmin;
    top: -7vmin;
    z-index: 2;
}

/* ////////////////////////// */

/* Styles for table list company */

.wardCompany {
    display: none;
}

.sections {
    font-size: 20px;
}

table#listCompany,
table#listCertifications {
    color: #3e4144;
}

table#listCompany thead {
    font-size: 20px;
}

#listCompany tbody tr td p {
    margin: 0;
}

#listCompany tbody tr td,
#listCertifications tbody tr td {
    padding: 1% !important;
    font-size: 14px;
}

.font-color-small {
    color: #595f65;
}

.font-small {
    font-size: small;
}

.font-strong {
    font-weight: bold;
}

.font-large {
    font-size: large;
}

.font-extra-large {
    font-size: xx-large;
}

.box-tag {
    margin: 1%;
    font-size: x-small;
    border: solid 1px #86bcd6;
    border-radius: 5px;
    background-color: #86bcd6;
    padding: 2%;
}

.svgTier,
.svgTierOne,
.svgTierTwo,
.svgTierThree,
.svgTierFour,
.svgTierFive {
    width: 15px;
    height: 15px;
    margin-top: 7px;
}

.svgTierOne {
    fill: #28a745;
}

.svgTierTwo {
    fill: #1775a9;
}

.svgTierThree {
    fill: #01a1f9;
}

.svgTierFour {
    fill: #f39c12;
}

.svgTierFive {
    fill: #74b816;
}

.box-tier,
.tierOne,
.tierTwo,
.tierThree,
.tierFour,
.tierFive {
    margin: 1%;
    font-size: x-small;
    border-radius: 5px;
    padding: 2%;
    color: white;
}

.tierOne {
    border: solid 1px #28a745;
    background-color: #28a745;
}

.tierTwo {
    border: solid 1px #1775a9;
    background-color: #1775a9;
}

.tierThree {
    border: solid 1px #01a1f9;
    background-color: #01a1f9;
}

.tierFour {
    border: solid 1px #f39c12;
    background-color: #f39c12;
}

.tierFive {
    border: solid 1px #74b816;
    background-color: #74b816;
}

/* ////////////////////////// */

/* main-sidebar-style */

svg {
    overflow: hidden;
    vertical-align: middle;
    bottom: 3px;
    position: relative;
}

#menuText {
    color: #ffffff;
    margin-left: 10px;
    top: 3px;
}

.user-name {
    color: #ffffff;
}

.nav-link.active #menuText {
    color: #457ec0 !important;
}

.nav-link:focus {
    color: #4075b0 !important;
}

/* Styles for table list certifications */

/* table#listCertifications thead {
    font-size: 18px;
}

table#listCertifications {
    color: #3e4144;
}
#listCertifications tbody tr td {
    font-size: 14px;
    padding: 5px !important;
    padding-left: 10px !important;
    margin: 0;
} */

/* ////////////////////////// */

#drag-file {
    opacity: 0;
    z-index: 550;
    width: 156px;
}

.drag-container {
    display: flex;
    justify-content: center;
    text-align: center;
    /* border: #333 solid 1px; */
    width: 100%;
    height: 45px;
    margin-bottom: 27px;
    border-radius: 5px;
    border-style: dashed;
    opacity: 0.5;
}

.drop-text {
    position: absolute;
    margin-top: 8px;
}

.colorLabel {
    color: #444444;
}

.textTitleReporting {
    color: #612529;
}

.textItemsReporting {
    align-content: center;
    color: #ad8e8d;
}

.btnReportingProject {
    background-color: #0978f8;
    color: #fafafa;
}

.btnReportingProject:hover {
    background-color: #0978f8;
    color: #fafafa;
}

.titleProjectReporting {
    text-align: center;
    border-bottom: 1px solid #e4e4e4;
}

/* CRETIFIED PAYROLL PDF Style */
.cpr_body {
    font-size: 6px;
    font-family: "Arial";
    /*     width:90vw; */
}

.cpr_main-table {
    width: 100vw;
    /* width:792px; */
    /*	height:612px;*/
    font-size: 6px;
    border-spacing: 0px;
}

.cpr_main-table tr td {
    border: 0.5px solid black;
}

.cpr_logo-img {
    width: 140px;
    /*     padding-right: 0px;
    margin-right: 0px; */
}

.cpr_txtvert {
    writing-mode: vertical-rl;
}

.cpr_complete-text10 {
    width: 10% !important;
    border-bottom: 1px solid black;
    display: inline-block;
    text-align: center;
}

.cpr_complete-text15 {
    width: 15% !important;
    border-bottom: 1px solid black;
    display: inline-block;
    text-align: center;
}

.cpr_complete-text40 {
    width: 40% !important;
    border-bottom: 1px solid black;
    display: inline-block;
    text-align: center;
}

.cpr_complete-text50 {
    width: 50% !important;
    border-bottom: 1px solid black;
    display: inline-block;
    text-align: center;
}

.cpr_complete-text60 {
    width: 60% !important;
    border-bottom: 1px solid black;
    display: inline-block;
    text-align: center;
}
.cpr_complete-text65 {
    width: 65% !important;
    border-bottom: 1px solid black;
    display: inline-block;
    text-align: center;
}
.cpr_complete-text70 {
    width: 70% !important;
    border-bottom: 1px solid black;
    display: inline-block;
    text-align: center;
}
.cpr_complete-text80 {
    width: 80% !important;
    border-bottom: 1px solid black;
    display: inline-block;
    text-align: center;
}
.cpr_complete-text90 {
    width: 90% !important;
    border-bottom: 1px solid black;
    display: inline-block;
    text-align: center;
}
.cpr_complete-text95 {
    width: 95% !important;
    border-bottom: 1px solid black;
    display: inline-block;
    text-align: center;
}
v .cpr_complete-text100 {
    width: 100% !important;
    border-bottom: 1px solid black;
    display: inline-block;
    text-align: center;
}
.cpr_complete-text130 {
    width: 130% !important;
    border-bottom: 1px solid black;
    display: inline-block;
    text-align: center;
}
.cpr_div-insd {
    width: 44%;
    margin: 0 20px;
    float: left;
    line-height: 9px;
}

.cpr_boxes {
    margin: 50px 0px 20px 20px;
}

.cpr_tag-line {
    position: absolute !important;
    text-align: center;
}

.cpr_exceptions-table {
    border: 1px solid black;
    width: 100%;
    border-spacing: 0px;
    font-size: 8px;
    text-align: center;
}

.cpr_exceptions-table tr td {
    width: 50%;
    border: 1px solid black;
    height: 30px;
}

.cpr_exceptions-table2 {
    border: 1px solid black;
    width: 100%;
    border-spacing: 0px;
    font-size: 8px;
    text-align: center;
    margin-top: 5px;
    /*     height: 90px; */
}

.cpr_exceptions-table2 tr td {
    width: 50%;
    border: 1px solid black;
    height: 30px;
    vertical-align: baseline;
}

.cpr_cpr_remarks {
    border: 1px solid black;
    margin-top: 5px;
    height: 100px;
}

.cpr_cpr_no-border {
    border: none !important;
}

.cpr_no-border-lft {
    border-left: none !important;
}

.cpr_no-border-rgt {
    border-right: none !important;
}

.cpr_txt-lft {
    text-align: left;
    width: 25%;
}

.cpr_txt-center {
    text-align: center;
}

.cpr_txt-rgt {
    text-align: right;
}

.cpr_linearotada {
    background-color: black;
    height: 1px;
    border: none;
    width: 82px;
    margin: -7px;
    transform: rotate(151deg);
    position: relative;
    left: 0px;
    top: 7px;
}

/* END PDF Style */

main{
    display: flex;
    min-width: 100%;
    background-color: #f4f6f9;
}
#app{
    display: flex;
    min-width: 100vw;
}
.wrapper{
    min-width:100%;
}
html{
    background-color: #f4f6f9;
}
table{
    z-index:1;
}
/* modals and table column */
.textAlignJustify{
    text-align: justify;
}
.textAlignCenter{
    text-align: center;
}
.editCopyCompany{
    display: flex;
    text-align:center;
    padding-top: 19px;
    align-items: baseline;
}
.editCopyFillCompany{
    display: flex;
    text-align:center;
    padding-top: 15px !important;
    align-items: baseline;
}
.addNewCompany{
    display: flex;
    padding-top: 15px;
    align-items: baseline;
}
*[class*="iconOrangeDescriptionWarning_"],*[class*='iconOrangeFullyExecutedLowerTierWarning_']{
    display: none;
    color: orange;
    margin-right: 4px;
}
.groupSelectIcon{
    display: flex;
    align-items: center;
}
.groupSelectIcon span.select2.select2-container.select2-container--default.select2-container--focus, .groupSelectIcon span.select2.select2-container.select2-container--default{
    width:100% !important;
    }
/*
.selectFullyExecutedLowerTier > .select2-container, .selectFullyExecutedLowerTier > .select2-container--default{
    width: 100% !important;
} */

/* GRIDS Styles */

.oddChilds:nth-child(odd) {
    background-color: hsl(210, 17%, 75%);
    color: hsl(210, 11%, 15%);
}

.evenChilds:nth-child(even) {
    background-color: hsl(0, 0%, 100%);
    color: hsl(210, 11%, 15%);
}

@media (prefers-color-scheme: dark) {
    .oddChilds:nth-child(odd) {
        background-color: hsl(210, 10%, 40%);
        color: hsl(210, 17%, 98%);
    }

    .evenChilds-element:nth-child(even) {
        background-color: hsl(210, 11%, 15%);
        color: hsl(210, 17%, 98%);
    }
}

/* Company form: "Add Project and Parent Contract" rows hidden by default (shown when clicking "+") */
.projectContractRow {
    display: none;
}

/* Company form: the duplicate-name notice takes no space when empty (avoids misaligning the input) */
.companyNameAlert:empty {
    display: none;
}

/* Certified Payroll list: V2 action buttons (view/edit/delete) in soft green to tell them apart from V1.
   display:contents keeps the wrapper transparent to layout so button alignment/spacing is unchanged;
   only the icon/svg color changes. */
.btn-cp-v2 {
    display: contents;
}
.btn-cp-v2 i {
    color: #4caf7d !important;
}
.btn-cp-v2 svg {
    fill: #4caf7d !important;
}


/* Dashboard sections of the project "Tracking and Dashboard config" tab (form and view modal).
   A section only looks active (bold, full colour, clickable) while a Tracking Form unlocks it.
   In the form it also flashes green/red the moment it is unlocked/locked, so the user sees what
   the Tracking Forms change affected. */
.dashboardSectionLabel {
    display: block;
    margin-bottom: 0;
    padding: 3px 6px;
    border-radius: 3px;
    font-weight: normal;
    color: #6c757d;
    opacity: 0.5;
    cursor: not-allowed;
    transition: opacity .25s ease, color .25s ease;
}
.dashboardSectionLabel.isAvailable {
    font-weight: 600;
    color: #444444;
    opacity: 1;
    cursor: pointer;
}
.dashboardSectionLabel.justUnlocked {
    animation: dashboardSectionUnlocked 1.6s ease-out;
}
.dashboardSectionLabel.justLocked {
    animation: dashboardSectionLocked 1.6s ease-out;
}
@keyframes dashboardSectionUnlocked {
    0%, 35% { background-color: #c3e6cb; }
    100% { background-color: transparent; }
}
@keyframes dashboardSectionLocked {
    0%, 35% { background-color: #f5c6cb; }
    100% { background-color: transparent; }
}
/* Read only rendering (project view modal): nothing is clickable there. */
.dashboardSectionLabel.isReadOnly,
.dashboardSectionLabel.isReadOnly.isAvailable {
    cursor: default;
}

/* Hourly credit for fringe benefits (WH-347): eight columns and one row per worker, so the table
   is kept compact and scrolls sideways instead of stretching its tab. Lives here because the
   certified payroll form, its preview and the read only view modal all render it. */
.tableFringesWrapperCP {
    overflow-x: auto;
}
.tableFringesCP {
    font-size: 12px;
    margin-bottom: .5rem;
}
/* Everything sits centered in its cell, both ways: the plan fields, the credits and the worker
   names all line up under the header of their column and in the middle of their row.
   Forced because adminlte sets `vertical-align: top` on `.table td` and several stylesheets are
   still injected after this one, so plain specificity is not enough to win. */
table.tableFringesCP th,
table.tableFringesCP td {
    padding: .25rem .35rem;
    vertical-align: middle !important;
    text-align: center !important;
}
.tableFringesCP .fringesWorkerCol {
    min-width: 170px;
}
.tableFringesCP .fringesPlanCol {
    min-width: 150px;
}
.tableFringesCP .fringesTotalCol {
    min-width: 95px;
}
/* The centering is forced because inputmask right aligns the masked amounts through an inline
   style, which a plain class rule cannot override. */
.tableFringesCP input.form-control {
    height: auto;
    padding: .15rem .35rem;
    font-size: 12px;
    text-align: center !important;
}

/* Column titles of the certified payroll personnel table, written sideways as in the WH-347 form.
   There are close to thirty columns, so upright titles are what makes the table too wide to read. */
.verticalTitleCP {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    padding: .35rem .15rem !important;
    font-size: 12px;
    /* Plain weight as the printed form has it: only the parts the form itself emphasises, such as
       "ALL WORK", are set apart, and they carry their own markup. */
    font-weight: 400;
    /* Sideways text swaps the axes: text-align runs top to bottom and vertical-align runs left to
       right, so this is what centres the title across the width of its column. */
    vertical-align: middle !important;
}

/* Box letters of the form, upright above the titles they name. */
.lettersRowCP th {
    padding: .2rem .15rem !important;
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
}

/* The header of the personnel table reads like the printed form: plain weight throughout, with
   emphasis only where the form itself puts it. */
#listCertified thead th,
#listCertifiedPayrollSave thead th {
    font-weight: 400;
}
#listCertified thead th b,
#listCertifiedPayrollSave thead th b {
    font-weight: 700;
}

/* Day of the week and date of each column of box (4), each in its own little box the way the
   printed form draws them. */
.dayBoxCP {
    margin: 0 0 .15rem;
    padding: .15rem .2rem;
    border: 1px solid #ced4da;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}
.dayBoxCP:last-child {
    margin-bottom: 0;
}

/* Title of a box that groups several columns, such as "Deductions For All Work" over its four.
   Reads across, unlike the titles of the columns it groups. */
.boxTitleCP {
    padding: .25rem .35rem !important;
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
    vertical-align: middle !important;
}

/* (1A) WORKER ENTRY NO. of the WH-347 form: just a counter, so it takes as little room as the
   header word allows in a table that is already short of width. */
#listCertified .workerEntryNo,
#listCertifiedPayrollSave .workerEntryNo,
.workerEntryNoCol {
    width: 1%;
    text-align: center;
    white-space: nowrap;
}

/* Flags a worker claiming more hourly credit than the fringe rate of their payroll row. */
table.tableFringesCP .fringeCreditWarning {
    margin-left: .3rem;
    font-size: 13px;
    color: #ffa000;
    vertical-align: middle;
}

/* Names the field of each cell of the header, so every row of the plan says what it holds instead
   of leaving it to a placeholder that disappears as soon as something is typed. */
table.tableFringesCP .fringesFieldLabel {
    margin-bottom: .1rem;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    color: #6c757d;
    white-space: nowrap;
}

/* Clears a whole plan. It sits under the plan title and says what it does, since an icon on its
   own does not read as "this empties the column". */
table.tableFringesCP .fringeClearPlan {
    display: inline-block;
    padding: 0;
    margin-top: .2rem;
    font-size: 13px;
    font-weight: normal;
    line-height: 1;
    color: #dc3545;
    text-decoration: underline;
    white-space: nowrap;
}
table.tableFringesCP .fringeClearPlan:hover {
    color: #a71d2a;
}
table.tableFringesCP .fringeClearPlan:disabled {
    color: #adb5bd;
    text-decoration: none;
}

/* Funded / unfunded: the two options sit side by side and centered like the fields above them,
   each one keeping its dot next to its own text. */
.tableFringesCP .fringesFundedCell label {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    font-size: 11px;
    white-space: nowrap;
}
.tableFringesCP .fringesFundedCell input[type="radio"] {
    vertical-align: middle;
    margin-right: .15rem;
}

/* Blinks the plan column that is half filled in when the preview is requested, so it is clear
   which plan has to be completed. Stops on its own after a couple of seconds. */
.fringeColumnError {
    animation: fringeColumnErrorBlink 1s ease-in-out 0s 2;
}
@keyframes fringeColumnErrorBlink {
    0%, 100% { background-color: transparent; }
    50%      { background-color: #f8d7da; }
}
.fringeFieldError {
    border: 1px solid #dc3545 !important;
}