/* MOBILE layout is default */
.container-grid {
    overflow-x: hidden;
    height: 100vh;
    display: grid;
    row-gap: 10px;
    grid-template-columns: 52px 52px 1fr;
    grid-template-rows: 10px 45px min-content min-content;
    grid-auto-flow: row;
    grid-template-areas:
            "header-line    header-line     header-line"
            "top-logo       main-sidebar    top-buttons"
            "top-text       top-text        top-text"
            "main-content   main-content    main-content";
}

.container-grid::before {
    content: "";
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column-end: span 4;
    -webkit-box-shadow: 0 1px 2px #aaa;
    box-shadow: 0 1px 2px #aaa;
    background-color: #f2f2f2;
}

/* TOP */
.header-line {
    grid-area: header-line;
}

.top-logo {
    grid-area: top-logo;
    background: #f2f2f2;
    z-index: 1;
    margin-top: 3px;
    display: flex;
    justify-self: center;
}

.top-text {
    grid-area: top-text;
    padding: 0;
}

.top-text .wrap-text {
    white-space: normal;
    word-break: break-word;
    word-wrap: break-word;
}

.top-text span {
    display: none;
}

.top-text a#projectTitleH2 {
    color: unset;
    text-decoration: none;
}

.top-buttons {
    grid-area: top-buttons;
    background: #f2f2f2;
    display: flex;
    justify-content: flex-end;
    column-gap: 5px;
}

.top-button-item {
    padding-top: 5px;
}

/* MAIN */
.main-sidebar {
    grid-area: main-sidebar;
    height: auto;
}

.main-sidebar > .sidebar-icon {
    display: none;
}

.main-sidebar nav {
    display: block;
    width: 0;
    top: 5px;
    position: relative;
}

.main-sidebar > .sidebar-menu {
    font-size: 16px;
    padding: 8px;
}

.logo2 {
    display: none;
}

/******* MOBILE MENU*******/
#menuToggle {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    -webkit-touch-callout: none;
}

/* Just a quick hamburger*/
#menuToggle > span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #646464;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 0.55s ease;
}

#menuToggle > span:first-child {
    transform-origin: 0 0;
}

#menuToggle > span:nth-last-child(2) {
    transform-origin: 0 100%;
}

/* Transform all the slices of hamburger into a crossmark. */
#menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #646464;
}

/* But let's hide the middle one. */
#menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

/* Ohyeah and the last one should go the other direction */
#menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

/* And let's slide it in from the left */
#menuToggle input:checked ~ div {
    transform: none;
}

/* Make this absolute positioned at the top left of the screen*/
#menu {
    position: relative;
    top: 5px;
    right: 10px;
    width: 200px;
    margin: 0 0 0 -50px;
    padding: 25px;
    background: #f2f2f2;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    transform-origin: 0 0;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li {
    padding: 5px 0;
}
/******* END MOBILE MENU*******/

.main-content {
    grid-area: main-content;
    display: grid;
    grid-template-rows: minmax(min-content, 1fr) 50px;
    grid-template-columns: 1fr;
    row-gap: 20px;
    grid-template-areas:
        "content"
        "footer";
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}

.col-padding {
    padding: 8px;
}

.col-padding-top {
    padding-top: 50px;
}

.col-padding-x {
    padding-left: 8px;
    padding-right: 8px;
}

.col-padding-y {
    padding-top: 8px;
    padding-bottom: 8px;
}

.headerDiv {
    padding: 0;
}

.maintenance-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-auto-columns: 1fr;
    row-gap: 10px;
    grid-auto-flow: row;
    grid-template-areas:
        "maintenance-title"
        "maintenance-text"
        "maintenance-image";
    border: 1px solid #EDAE34;
    padding: 10px;
}

.maintenance-title {
    grid-area: maintenance-title;
}

.maintenance-text {
    grid-area: maintenance-text;
    color: #646464;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
}

.maintenance-image {
    grid-area: maintenance-image;
    margin-left: auto;
    margin-right: auto;
}

.table-cell-2, .table-cell-3, .table-cell-4, .grid-2, .grid-3, .grid-4 {
    display: none;
}

.table-cell-1 {
    display: table-cell;
}

.grid-1 {
    display: grid;
}

tbody td.table-cell-4, tbody td.table-cell-3, tbody td.table-cell-2, tbody td.table-cell-1 {
    padding-top: 16px;
    padding-bottom: 16px;
}

.loginContainer {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 40px;
}

.loginRegistrationWrapper {
    border: 1px solid #EDAE34;
    padding: 25px;
}

.loginContactWrapper {
    border: 1px solid #EDAE34;
    padding: 25px;
    display: none;
}

.loginRegistrationWrapper.show-if-mobile, .loginRegistrationWrapper.show-if-mobile {
    display: grid;
}

.contentHome .contentForm {
    row-gap: 30px;
}

.contentForm {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 20px;
}

.contentForm > .row {
    display: grid;
    grid-template-columns: repeat(10, 20px) repeat(auto-fit, minmax(20px,1fr));
    row-gap: 10px;
    column-gap: 5px;
    min-height: 20px;
}

.contentForm > .links {
    display: grid;
    grid-template-columns: repeat(10, 20px) repeat(auto-fit, minmax(20px,1fr));
    grid-template-rows: 20px 20px 20px;
    row-gap: 20px;
    column-gap: 5px;
    min-height: 20px;
}

.contentForm > .code {
    display: grid;
    grid-template-columns: repeat(6, minmax(auto, 50px));
    column-gap: 10px;
    min-height: 50px;
}

.rowCheckbox {
    display: grid;
    grid-template-columns: 20px 1fr;
    column-gap: 10px;
}

.rowIconText {
    display: grid;
    grid-template-columns: 20px 20px 1fr;
    column-gap: 10px;
}

.rowIconText > svg, .rowCheckbox > label::before {
    grid-column: 1/2;
}
.rowIconText > span, .rowCheckbox > label {
    grid-column: 2/-1;
    align-self: center;
}

.rowIconText > svg.sub {
    grid-column: 2/3;
}
.rowIconText > span.sub {
    grid-column: 3/-1;
}

.contentForm > p, .registrationForm > p {
    margin: 0;
}

.contentFormTitle {
    grid-column-start: 1;
    grid-column-end: -1;
    margin-bottom: 10px;
}

.contentFormLabel, .contentFormSmallLabel {
    grid-column-start: 1;
    grid-column-end: -1;
}

.contentFormIcon {
    grid-column-start: 1;
    grid-column-end: 2;
    justify-self: end;
}

.contentFormInput, .contentFormInput.pwd {
    grid-column-start: 2;
    grid-column-end: -1;
}

.contentFormAfter {
    grid-column-start: 2;
    grid-column-end: -1;
}

.contentFormLabel + .contentFormInput, .contentFormSmallLabel + .contentFormInput {
    grid-column-start: 1;
}

.contentFormIcon + .contentFormInput {
    grid-column-start: 2;
}

.contentFormInput > input {
    max-width: none;
}

.contentFormSubmit {
    grid-column-start: 1;
    grid-column-end: -1;
    padding-top: 5px;
}

.contentFormSubmit + .contentFormSubmit {
    grid-column-start: 1;
    grid-column-end: -1;
}

.contentFormCreateAccount {
    grid-column-start: 1;
    grid-column-end: -1;
}

.contentFormCreateAccount.oneTimePwd {
    grid-row-start: -1;
}

.contentFormForgotusername {
    grid-column-start: 1;
    grid-column-end: -1;
}

.contentFormForgotpassword {
    grid-column-start: 1;
    grid-column-end: -1;
}

/*forgot username*/
.forgotUsrTable {
    width: 100%;
    max-width: 700px;
}

.forgotUsrTableRow {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(10, auto);
}

.forgotUsrTableRow  td:nth-child(1) {
    padding-left: 0;
    padding-right: 5px;
    padding-top: 24px;
    grid-column-start: 1;
    grid-column-end: -1;
    display: inline-block;
    font-weight: bold;
}

.forgotUsrTableRow  td:nth-child(2) {
    padding-left: 0;
    padding-right: 5px;
    grid-column-start: 1;
    grid-column-end: -1;
    display: inline-block;
}

.forgotUsrTableRow  td:nth-child(3) {
    padding-left: 0;
    padding-right: 5px;
    padding-bottom: 24px;
    grid-column-start: 1;
    grid-column-end: -1;
    display: inline-block;
}
.manuals {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
}

.manuals > .row {
    display: grid;
    grid-template-columns: 80px 1fr;
    row-gap: 10px;
    column-gap: 5px;
    min-height: 120px;
}

.manualIcon {
    align-self: center;
    justify-self: center;
}

.manualName {
    align-self: center;
}


/*registrations*/
.registrationForm, #vca_content, #gpi_content {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
}

.registrationForm > .row, #vca_content > .row, #gpi_content > .row {
    display: grid;
    grid-template-columns: repeat(10, 20px) repeat(auto-fit, minmax(20px,1fr));
    row-gap: 10px;
    column-gap: 5px;
    min-height: 20px;
}

.registrationFormTitle {
    grid-column-start: 1;
    grid-column-end: -1;
    margin-top: 20px;
}

.registrationFormLabel {
    grid-column-start: 1;
    grid-column-end: -1;
    align-self: end;
    margin-top: 5px;
    font-weight: bold;
}

.registrationFormIcon {
    grid-column-start: 1;
    grid-column-end: 2;
}

.registrationFormInput {
    grid-column-start: 1;
    grid-column-end: -2;
}

.registrationFormText {
    grid-column-start: 1;
    grid-column-end: -1;
}

.registrationFormIcon + .registrationFormInput {
    grid-column-start: 2;
    grid-column-end: -2;
}

.registrationFormInputError {
    grid-column-start: 1;
    grid-column-end: -1;
}

.registrationFormIcon + .registrationFormIcon {
    grid-column-start: 2;
    grid-column-end: 3;
}

.registrationFormIcon + .registrationFormIcon + .registrationFormInput {
    grid-column-start: 3;
    grid-column-end: -2;
}

.registrationFormInput + .registrationFormLabel {
    grid-column-start: 3;
    grid-column-end: -1;
    max-width: 80vw;
    font-weight: normal;
    margin-top: unset;
}

.registrationForm  #indicatorid, .registrationForm  #confirmid {
    grid-column-start: 3;
    grid-column-end: -1;
}

.registrationFormIcon + .registrationFormLink {
    grid-column-start: 2;
    grid-column-end: -1;
}

.registrationFormLink {
    grid-column-start: 1;
    grid-column-end: -1;
}

.registrationFormInput > a > span, .registrationFormLink >a > span {
    margin-bottom: -5px;
}


.registrationFormBtn, .registrationFormBtn + .registrationFormBtn {
    grid-column-start: 1;
    grid-column-end: -1;
    margin-top: 20px;
}

.registrationFormInput .radio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 150px));
    row-gap: 5px;
    width: 50vw;
}

.registrationFormCheckbox {
    grid-column-start: 1;
    grid-column-end: 2;
}

.registrationFormCheckbox + .registrationFormLabel {
    grid-column-start: 2;
    grid-column-end: -1;
    margin-top: 0;
    align-self: center;
}

.registrationForm > .resultTrafficLight {
    display: grid;
    grid-template-columns: 95px 70px 50px;
    grid-template-rows: repeat(4, 36px);
    row-gap: 10px;
    column-gap: 10px;
    font-size: 18px;
    justify-self: start;
    margin-bottom: 15px;
}

.trafficLight {
    grid-column: 1/2;
    grid-row: 1/5;
}

.registrationForm > .questionsResult {
    display: grid;
    grid-template-columns: 20px 20px 150px 1fr 27px;
    column-gap: 5px;
    min-height: 20px;
    font-size: 16px;
}

.resultIcon {
    grid-column: 1/2;
}

.resultQuestion {
    grid-column: 2/5;
}

.resultLabelIcon {
    grid-column: 2/3;
}

.resultLabelAnswer {
    display: none;
}

.resultIcon {
    grid-column: 1/2;
}
.resultIcon + .resultQuestion {
    grid-column: 2/-1;
}
.resultAnswer {
    grid-column: 3/-1;
}
.resultBtn {
    grid-column: 1/-1;
    justify-self: start;
    margin-bottom: 15px;
}
.questionsResult > .resultNumber {
    grid-column: 1/2;
}

.resultQuestion + .resultIcon {
    grid-column: 5/-1;
    justify-self: right;
}

a.tooltip:hover div.documentTooltip, a.tooltipleft:hover div.documentTooltip {
    display: none;
}

.answerLabel {
    display: grid;
    grid-template-columns: 20px 1fr;
    column-gap: 5px;
}

/* TABLET layout */
@media (min-width: 768px) {
    .container-grid {
        overflow-x: hidden;
        height: 100vh;
        display: grid;
        row-gap: 10px;
        grid-template-columns: 212px 52px 1fr;
        grid-template-rows: 10px 45px min-content min-content;
        grid-auto-flow: row;
        grid-template-areas:
            "header-line    header-line     header-line"
            "top-logo       main-sidebar    top-buttons"
            "top-text       top-text        top-text"
            "main-content   main-content    main-content";
    }

    #menu {
        margin: 0 0 0 -212px;
    }

    .maintenance-grid {
        display: grid;
        grid-template-columns: 200px 240px;
        grid-template-rows: auto auto;
        grid-auto-columns: 1fr;
        gap: 20px;
        grid-auto-flow: row;
        grid-template-areas:
            "maintenance-title maintenance-title"
            "maintenance-image maintenance-text";
    }

    .maintenance-title {
        grid-area: maintenance-title;
    }

    .maintenance-image {
        align-self: center;
        grid-area: maintenance-image;
    }

    .maintenance-text {
        grid-area: maintenance-text;

        color: #646464;
        font-size: 13px;
        font-family: Arial, Helvetica, sans-serif;
    }

    .table-cell-3, .table-cell-4, grid-3, .grid-4 {
        display: none;
    }

    .table-cell-1, .table-cell-2 {
        display: table-cell;
    }

    .grid-1, .grid-2 {
        display: grid;
    }

    tbody td.table-cell-4, tbody td.table-cell-3, tbody td.table-cell-2, tbody td.table-cell-1 {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .loginRegistrationWrapper {
        border: 1px solid #EDAE34;
        margin-right: 20px;
        width: 500px;
        padding: 48px 50px 32px 50px;
    }

    .loginContactWrapper {
        border: 1px solid #EDAE34;
        margin-right: 20px;
        width: 500px;
        padding: 48px 50px 32px 50px;
        display: block;
    }

    .loginRegistrationWrapper.show-if-mobile, .loginRegistrationWrapper.show-if-mobile {
        display: none;
    }

    .contentFormTitle {
        grid-column-start: 1;
        grid-column-end: -1;
        margin-bottom: 10px;
    }

    .contentFormLabel {
        grid-column-start: 1;
        grid-column-end: 8;
    }

    .contentFormSmallLabel {
        grid-column: 1/4;
    }

    .contentFormIcon {
        grid-column-start: 8;
        grid-column-end: 9;
        justify-self: end;
    }

    .contentFormInput {
        grid-column-start: 9;
    }

    .contentFormInput.pwd {
        grid-column-start: 9;
        grid-column-end: 22;
    }

    .contentFormAfter {
        grid-column-start: 23;
        grid-column-end: -1;
        white-space: nowrap;
    }

    .contentFormLabel + .contentFormInput {
        grid-column-start: 9;
    }

    .contentFormSmallLabel + .contentFormInput {
        grid-column-start: 5;
    }

    .contentFormIcon + .contentFormInput {
        grid-column-start: 9;
    }

    .contentFormInput > input {
        max-width: none;
    }

    .contentFormSubmit {
        grid-column-start: 1;
        grid-column-end: 10;
    }

    .contentFormSubmit + .contentFormSubmit {
        grid-column-start: 10;
        grid-column-end: -1;
    }

    .contentFormCreateAccount {
        grid-column-start: 11;
        grid-column-end: -1;
        grid-row-start: 1;
    }

    .contentFormForgotusername {
        grid-column-start: 1;
        grid-column-end: 10;
        grid-row-start: 1;
    }

    .contentFormForgotpassword {
        grid-column-start: 1;
        grid-column-end: -1;
    }

    .contentFormCreateAccount a, .contentFormForgotusername a, .contentFormForgotpassword a {
        display: flex;
        column-gap: 5px;
    }

    .forgotPwdWrapper{
        width: 400px;
    }

    .forgotUsrTableRow {
        display: table-row;
    }

    .forgotUsrTableRow  td:nth-child(1), .forgotUsrTableRow  td:nth-child(2), .forgotUsrTableRow  td:nth-child(3) {
        padding: 5px 5px 5px 0;
        display: table-cell;
        font-weight: normal;
    }

    .contentForm > .row {
        display: grid;
        grid-template-columns: repeat(15, 20px) repeat(auto-fit, 20px);
        column-gap: 5px;
        min-height: 20px;
    }

    .contentForm > .code {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
        column-gap: 10px;
        min-height: 50px;
    }

    .contentForm > .links {
        display: grid;
        grid-template-columns: repeat(15, 20px) repeat(auto-fit, minmax(20px,1fr));
        grid-template-rows: 20px 20px;
        column-gap: 5px;
        row-gap: 10px;
        margin-top: 20px;
    }

    .manuals > .row {
        display: grid;
        grid-template-columns: 160px 1fr;
        row-gap: 10px;
        column-gap: 5px;
        min-height: 120px;
    }

    .registrationForm > .row, #vca_content > .row, #gpi_content > .row {
        display: grid;
        grid-template-columns: repeat(25, 20px) repeat(auto-fit, 20px);
        row-gap: 10px;
        column-gap: 5px;
        min-height: 20px;
    }

    .registrationFormTitle {
        grid-column-start: 1;
        grid-column-end: 25;
        margin-top: 20px;
    }

    .registrationFormLabel {
        grid-column-start: 1;
        grid-column-end: 11;
        align-self: end;
        margin-top: unset;
        font-weight: normal;
    }

    .registrationFormWideRow .registrationFormLabel {
        grid-column-start: 1;
        grid-column-end: 25;
        align-self: end;
        margin-top: unset;
        font-weight: normal;
    }

    .registrationFormIcon {
        grid-column-start: 11;
        grid-column-end: 12;
    }

    .registrationFormWideRow .registrationFormIcon {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .registrationFormInput {
        grid-column-start: 11;
        grid-column-end: 25;
        align-self: end;
    }

    .registrationFormWideRow .registrationFormInput {
        grid-column-start: 1;
        grid-column-end: 25;
        align-self: end;
    }

    .registrationFormText {
        grid-column-start: 1;
        grid-column-end: 25;
    }

    .registrationFormIcon + .registrationFormInput {
        grid-column-start: 12;
        grid-column-end: 25;
    }

    .registrationFormInputError {
        grid-column-start: 25;
        grid-column-end: -1;
    }

    .registrationFormWideRow .registrationFormIcon + .registrationFormInput {
        grid-column-start: 2;
        grid-column-end: 25;
    }

    .registrationFormIcon + .registrationFormIcon {
        grid-column-start: 12;
        grid-column-end: 13;
    }

    .registrationFormWideRow .registrationFormIcon + .registrationFormIcon {
        grid-column-start: 2;
        grid-column-end: 3;
    }

    .registrationFormIcon + .registrationFormIcon + .registrationFormInput {
        grid-column-start: 13;
        grid-column-end: 25;
    }

    .registrationFormWideRow .registrationFormIcon + .registrationFormIcon + .registrationFormInput {
        grid-column-start: 3;
        grid-column-end: 25;
    }

    .registrationForm  #indicatorid, .registrationForm  #confirmid {
        grid-column-start: 26;
        grid-column-end: -1;
        white-space: nowrap;
    }

    .registrationFormIcon + .registrationFormLink {
        grid-column-start: 12;
        grid-column-end: -7;
    }

    .registrationFormLink {
        grid-column-start: 11;
        grid-column-end: -7;
    }

    .registrationFormBtn {
        grid-column-start: 1;
        grid-column-end: 10;
    }

    .registrationFormBtn + .registrationFormBtn {
        grid-column-start: 10;
        grid-column-end: 20;
    }

    .registrationFormCheckbox {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .registrationFormCheckbox + .registrationFormLabel {
        grid-column-start: 2;
        grid-column-end: -1;
    }

    div.help:hover>.hidden-help, div.helpsignature:hover>.hidden-help {
        left: -45px;
        width: 200px;
    }

    .registrationFormWideRow div.help:hover>.hidden-help, .registrationFormWideRow div.helpsignature:hover>.hidden-help {
        left: 0px;
        width: 200px;
    }

    .resultLabelAnswer {
        display: grid;
        grid-column: 3/4;
    }

    .resultAnswer {
        grid-column: 4/-1;
    }

    /*documents*/
    a.tooltip:hover div.documentTooltip, a.tooltipleft:hover div.documentTooltip {
        display: block;
        position: relative;
        bottom: 15px;
    }

}

/* MAIN layout */
@media (min-width: 992px) {
    .container-grid {
        overflow-x: hidden;
        overflow-y: hidden;
        height: 100vh;
        display: grid;
        row-gap: 10px;
        grid-template-columns: 232px 1fr 200px;
        grid-template-rows: 10px 45px 1fr;
        grid-template-areas:
            "header-line    header-line    header-line"
            "top-logo       top-text       top-buttons"
            "main-sidebar   main-content   main-content";
    }

    /*display box-shadow on top row*/
    .container-grid::before {
        content: "";
        grid-row-start: 2;
        grid-column-start: 1;
        grid-column-end: span 5;
        -webkit-box-shadow: 0 1px 2px #aaa;
        box-shadow: 0 1px 2px #aaa;
        background-color: #f2f2f2;
    }

    /* TOP */
    .header-line {
        grid-area: header-line;
    }

    .top-logo {
        grid-area: top-logo;
        background: #f2f2f2;
        margin-top: 3px;
    }

    .top-text {
        grid-area: top-text;
        background: #f2f2f2;
        white-space: nowrap;
        z-index: 1;
        align-self: center;
        word-wrap: unset;
    }

    .top-text span {
        display: inline-block;
    }

    .top-text a#projectTitleH2 {
        color: #edae34;
    }

    .top-buttons {
        grid-area: top-buttons;
        background: #f2f2f2;
        display: flex;
        justify-content: flex-end;
        column-gap: 5px;
    }

    .top-button-item {
        padding-top: 5px;
    }

    /* MAIN */
    .main-sidebar {
        grid-area: main-sidebar;
        height: auto;
    }

    .main-sidebar > .sidebar-icon {
        display: block;
        text-align: center;
        font-size: 16px;
        padding-top: 40px;
    }

    .main-sidebar > .sidebar-menu {
        margin-top: -10px;
        padding: 50px 25px 25px 25px;
        font-size: 16px;
        border-right: #c8c8c8 2px solid;
        height: 100%;
    }

    #menuToggle input, #menuToggle > span {
        display: none;
    }

    #menu {
        width: 180px;
        margin: 0;
        padding: 0;
        position: unset;
        background: unset;
        transform: unset;
        transition: none;
    }

    #menu li {
        padding: 0;
    }

    .main-content {
        grid-area: main-content;
        overflow-y: auto;
        display: grid;
        row-gap: 20px;
        grid-template-rows: minmax(min-content, 1fr) 50px;
        grid-template-columns: 1fr;
        grid-template-areas:
                "content"
                "footer";
    }

    .content {
        grid-area: content;
    }

    /* FOOTER */
    .footer {
        grid-area: footer;
        margin-right: 232px;
    }

    .col-padding {
        padding: 12px 20px;
    }

    .col-padding-x {
        padding-left: 20px;
        padding-right: 20px;
    }

    .col-padding-y {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .logo2 {
        display: block;
    }

    .headerDiv {
        padding-top: 35px;
    }

    .table-cell-4, grid-4 {
        display: none;
    }

    .table-cell-1, .table-cell-2, .table-cell-3 {
        display: table-cell;
    }

    .grid-1, .grid-2, .grid-3 {
        display: grid;
    }

    tbody td.table-cell-4, tbody td.table-cell-3, tbody td.table-cell-2, tbody td.table-cell-1 {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .registrationForm  #indicatorid, .registrationForm  #confirmid {
        grid-column-start: 12;
    }

}

.contentHome {
    display: flex;
    flex-wrap: wrap;
    row-gap: 40px;
    column-gap: 35px;
}

@media (min-width: 1200px) {

    .loginContainer {
        display: grid;
        grid-template-columns: 640px 640px;
    }

    .table-cell-1, .table-cell-2, .table-cell-3, .table-cell-4 {
        display: table-cell;
    }

    .grid-1, .grid-2, .grid-3, .grid-4 {
        display: grid;
    }

    tbody td.table-cell-4, tbody td.table-cell-3, tbody td.table-cell-2, tbody td.table-cell-1 {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .registrationForm  #indicatorid, .registrationForm  #confirmid {
        grid-column-start: -1;
    }
}