body {

    margin: 0;

    padding: 0;

    background-color: #F5F5F5;

    font-size: 13px;

    color: #333;

    font-family: 'Roboto', sans-serif;

}



.hidden {

    display: none !important;

}



/* To hide questions */

.hide {

    visibility: hidden;

}



/* To disable next button in step-3 */

.disabled {

    opacity: 0.5;

    pointer-events: none;

  }



/* Progress Bar */

.progress-outer {

    position: fixed;

    top: 0;

    left: 0;

    height: 5px;

    background-color: black;

    transition: all linear 0.1s;

    z-index: 2;

    border-radius: 0;

    width: 100%;

}

.progress {

    position: fixed;

    top: 0;

    left: 0;

    height: 5px;

    background-color: #C2CAD3;

    transition: all linear 0.1s;

    min-width: 1%;

    z-index: 2;

    border-radius: 0;

}



/* Yellow border */

.required {

    border: 4px solid yellowgreen !important;

 }

.fs-5 {

    font-size: 18px !important;

}

.red-btn {

    border-radius: 8px;

    background-color: #ED1A3B;

    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);

    font-size: 14px;

    line-height: 24px;

    font-weight: 500;

    color: #fff;

    padding: 10px 30px;

}

.red-btn-download {
    border-radius: 8px;

    background-color: #ED1A3B;

    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);

    font-size: 14px;

    line-height: 24px;

    font-weight: 500;

    color: #fff;

    padding: 10px;
}

.btn-default-padding {

    padding: 10px 20px;

    font-size: 14px;

    line-height: 24px;

    font-weight: 500;

    border-radius: 8px;

}



.back-btn {

    min-width: 180px;

    background-color: #C2CAD3;

}



.completed-modal-box {

    background: rgba(13, 199, 87, 0.20);

}



.completed-modal-box:focus,

.completed-modal-box:hover,

.completed-modal-box:focus-visible {

    background: rgba(13, 199, 87, 0.20);

}



.wrapper {

    /* height: 100vh; Set the height of the .wrapper container to 100% of the viewport height */

    /* overflow-y: auto; Enable vertical scrolling if the content exceeds the height of the .wrapper container */

    margin: 0;

    padding: 0;

}



.CFDI-cyber-center-box {

    width: 100%;

    margin: 0;

    padding: 0;

    margin-top: 50px;

    display: flex;

}



.main-section {

    padding-bottom: 100px;

}



.main {

    max-width: 800px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    flex-direction: column;

    justify-content: center;

}



.CFDI-cyber-main {

    border-radius: 8px;

    background-color: #fff;

    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);

    text-align: center;

    padding: 0 0 50px 0;

    margin-bottom: 60px;

}



.CFDI-cyber-header {

    border-radius: 8px 8px 0px 0px;

    background: #3D4146;

    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);

    font-size: 24px;

    color: #fff;

    font-weight: 300;

    margin: 0;

    padding: 20px 15px;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

}



.CFDI-cyber-header p {

    text-align: left;

    font-size: 24px;

    line-height: 24px;

    margin: 0;

}



.CFDI-cyber-header strong {

    font-weight: 500;

}



.CFDI-cyber-header img {

    width: 45px;

}



.CFDI-cyber-security-content {

    padding: 30px;

}



.CFDI-cyber-security-content p {

    text-align: center;

    font-weight: 400;

    font-size: 14px;

    line-height: 24px;

    color: #333333;

    margin: 0;

}



.supported-section {

    margin: 0;

}



.supported-section p {

    font-size: 13px;

    margin: 0 0 30px 0;

    opacity: 0.8;

    text-align: center;

}


.supported-box {
    display: grid;
    grid-row-gap: 20px;
    margin-bottom: 20px;
}


ul.supported-gallery {

    margin: 0;

    padding:0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    grid-column-gap: 30px;

}



ul.supported-gallery li {

    margin: 0;

    padding: 0;

    list-style: none;

}



ul.supported-gallery li a {

    margin: 0;

    padding: 0;

    text-decoration: none;

}



ul.supported-gallery li a img {

    max-height: 35px;

    width: 100%;

}



/** landing page **/

.header-top-full {

    width: 100%;

    background-color: #fff;

    padding: 15px;

}



.header-top {

    max-width: 1024px;

    margin: 0 auto;

}



.header-top .header-box {

    display: flex;

    justify-content: center;

    align-items: center;

}



/*.header-top .header-box .header-left {

    padding-right: 25px;

}
*/


.header-top .header-box .header-left a {

    display: flex;

    align-items: center;

    grid-column-gap: 10px;

    color: #333;

    text-decoration: none;

}



.header-top .header-box .header-left p {

    margin-bottom: 0;

    font-size: 18px;

}



.header-top .header-box .header-right a {

    font-size: 13px;

    line-height: 18px;

    color: #3D4045;

    font-weight: 700;

    text-decoration: underline;

}



.banner-full-section {

    width: 100%;

    background-color: #3D4146;

    padding: 50px 30px;

    margin-bottom: 50px;

}



.banner-content-section {

    max-width: 800px;

    margin: 0 auto;

    text-align: center;

}



.banner-content-section h1 {

    font-size: 26px;

    line-height: 26px;

    color: #fff;

    font-weight: 300;

    margin-bottom: 20px;

}



.banner-content-section h1 img {

    width: 30px;

}



.banner-content-section p {

    font-size: 14px;

    line-height: 24px;

    font-weight: 300;

    color: #fff;

    margin: 0;

}



.form-section {

    max-width: 800px;

    margin: 0 auto 40px;

}



.form-main {

    border-radius: 8px;

    background: #FFF;

    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);

    padding: 30px;

    margin-bottom: 15px;

}



.form-section .form-box h2 {

    font-size: 16px;

    font-weight: 700;

    margin-bottom: 15px;

}

.form-section .form-box textarea {

    font-size: 14px;

}

.form-section .form-box p {

    font-size: 13px;

    line-height: 24px;

    color: rgba(61, 64, 69, 0.80);

}



.form-section .form-box form input,

.form-section .form-box form select {

    height: 48px;

    border-color: #cecfd1;

    font-size: 14px;

}



.form-section .form-box form input:focus,

.form-section .form-box form select:focus {

    background-color: #f9f9f9;

    border-color: #cecfd1;

    box-shadow: none;

}



.form-section .form-box .form-check-input[type=checkbox] {

    height: 17px;

    border-color: #3D4146;

    width: 17px;

}



.form-section .form-box .form-check-input[type=checkbox]:checked {

    background-color: #3D4146;

}



.form-section .form-box .checkbox-box .form-check input.form-check-input[type="checkbox"] {

    height: 16px;

    width: 16px;

}



.form-section .form-box .checkbox-box .form-check input.form-check-input[type="checkbox"]:checked {

    background-color: #3D4146;

}
.label-form-title {
    display: flex;
    align-items: center;
    grid-column-gap: 5px;
}


/** Begin Questionnaire section **/

.questionnaire-box {

    max-width: 800px;

    margin: 0 auto 40px;

    z-index: 1;

    position: relative;

}



.questionnaire-section {

    margin: 0 0 15px 0;

}



.questionnaire-section .rightbox {

    width: 100%;

}



.questionnaire-main {

    border-radius: 8px;

    background: #FFF;

    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);

    padding: 40px 36px;

    margin-bottom: 15px;

}



.cyber-security-box {

    display: flex;

    grid-column-gap: 30px;

    border-radius: 8px;

    background: #FAFAFA;

    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);

    padding: 40px 36px;

    margin-bottom: 15px;

}



.cyber-security-box.rounded-bottom-0 {

    border-bottom-left-radius: 0;

    border-bottom-right-radius: 0;

}



.cyber-security-dropdown-box {

    display: flex;

    grid-column-gap: 30px;

    border-bottom-left-radius: 8px;

    border-bottom-right-radius: 8px;

    background: #fff;

    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);

    padding: 40px 36px;

    margin-bottom: 15px;

    margin-top: -15px;

}



.cyber-security-dropdown-box.hidden {

    display: none !important;

}



.cyber-security-dropdown-box .card-group .card {

    border-radius: 16px;

}

.cyber-security-dropdown-box .card-group .card:hover {

    box-shadow: 0px 1px 2px 1px rgba(13, 199, 87, 0.6);

    border-color:#0DC757 ;

    cursor: pointer;

}

.cyber-security-dropdown-box .card-group .card:hover .card-body .content-box label {

    cursor: pointer;

}

.cyber-security-dropdown-box .card-group:last-child .card.active {

    border: 2px solid #0DC757;

    background: #E7F9EE;

    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);

}



.cyber-security-dropdown-box .card-group>.card:not(:first-child) {

    border-top-left-radius: 0;

    border-bottom-left-radius: 0;

}

.cyber-security-dropdown-box .card-group>.card:not(:last-child) {

    border-top-right-radius: 0;

    border-bottom-right-radius: 0;

}



.questionnaire-section .cyber-security-box .leftbox h2 {

    font-weight: 300;

    font-size: 26px;

}



.questionnaire-section .cyber-security-box .rightbox a {

    font-size: 13px;

    line-height: 26px;

    font-weight: 500;

    padding: 7px 15px;

}



.questionnaire-section .cyber-security-box .rightbox a img {

    margin-left: 8px;

}



.questionnaire-section .cyber-security-box .rightbox .completed-box {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.questionnaire-section .cyber-security-box .rightbox .completed-box a.btn-green {

    background: rgba(13, 199, 87, 0.20);

    text-decoration: none;

}



.questionnaire-section .cyber-security-box .rightbox .completed-box a.btn-green img {

    margin-right: 8px;

    margin-left: 0;

    width: 20px;

}



.cyber-security-dropdown-box .card-group .card-body input.form-check-input[type="radio"] {

    height: 20px;

    width: 20px;

    border-radius: 25%;

    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");

}



.cyber-security-dropdown-box .card-group .card-body input.form-check-input[type="radio"]:checked {

    background-color: #0DC757;

    border-color: #0DC757;

}



.cyber-security-dropdown-box .card-group .card-body input.form-check-input[type="radio"]:focus {

    box-shadow: none;

}



.cyber-security-dropdown-box .card-group .card-body .content-box p {

    margin-top: 15px;

}



.questionnaire-section.completed-section {

    position: relative;

}



.questionnaire-section.completed-section:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    border-top-left-radius: 8px;

    border-bottom-left-radius: 8px;

    border-left: 10px solid #0DC757;

    background: #FAFAFA;

    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);

}



.govern-maturity {

    text-align: center;

    margin-top: 30px;

}



.govern-maturity h3 {

    font-size: 18px;

    font-weight: 500;

    line-height: 24px;

}



.govern-maturity h4 {

    color: #333;

    font-size: 13px;

    font-weight: 400;

}



.govern-maturity ul.essential-eight-maturity {

    margin: 0;

    padding: 0;

    display: flex;

    justify-content: center;

    grid-column-gap: 15px;

    margin-bottom: 15px;

}



.govern-maturity ul.essential-eight-maturity li {

    margin: 0;

    padding: 0;

    list-style: none;

    grid-column-gap: 10px;

    display: flex;

    align-items: center;

}



.footer-section p {

    font-size: 13px;

    line-height: 24px;

    color: rgba(61, 64, 69, 0.80);

}



.footer-section p a {

    color: #333;

    text-decoration: underline;

    font-weight: 500;

}



.footer {

    width: 100%;

    position: relative;

    background: #FFF;

    box-shadow: 0px -2px 20px 0px rgba(0, 0, 0, 0.05);

    padding: 20px;

    bottom: 0;

    z-index: 3;

}



.footer .footer-bottom {

    max-width: 1024px;

    margin: 0 auto;

}



.footer .footer-bottom .btn-box {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.footer .footer-bottom .btn-box .btn-group-box {

    display: flex;

    grid-column-gap: 15px;

    align-items: center;

}



.footer .footer-bottom.btn-complate {

    display: flex;

    justify-content: end;

    align-items: center;

}



.footer .footer-bottom .btn-box .questions-completed-btn {

    background: rgba(13, 199, 87, 0.20);

    text-decoration: none;

}

.questionnaire-completed-pdgn .form-main #dynamic_data .col-sm-5 input[type="text"] {
    height: 40px;
}

.btn-group-bx-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.row-height {
    height: 40px;
}