/*
CSS File Summary:


This CSS file is designed to enhance the responsiveness and visual layout of a web application across various devices. It employs media queries to adapt the design for optimal viewing on screens of different sizes, from mobile to desktop. The file includes definitions for the following key components, ensuring a consistent and user-friendly experience:

1. Header Elements:
   - `.header-logo`: Adjusts the padding for the site's logo to align properly within the header.
   - `.header-profile-box`: Styles the profile box in the header, including padding adjustments for alignment.

2. Sidebar & Tabs:
   - `.aside-bar`: Styles the sidebar with appropriate padding for content separation.
   - `.aside-tabs`: Defines the look and feel of navigation tabs, including font size and margin adjustments for list items.

3. Cards Layout:
   - `.cards`, `.card`: Establishes grid layouts and spacing for card elements, accommodating various content forms.
   - `.hover-card`: Applies specific hover effects to cards for interactive feedback.

4. Content Boxes & Descriptions:
   - `.goed-contain-box`, `.goed-discription`, `.goed-title`: Tailors the presentation of content boxes, descriptions, and titles for clarity and emphasis.

5. Progress Bars & Charts:
   - `.circle-progresbar`, `.pie`, `.pie-main-box`: Configures circular progress bars and pie charts for visual data representation.

6. Interactive Elements:
   - `.checkbox-round`, `.bookmark`: Custom styles for checkbox and bookmark icons, enhancing usability and visual appeal.

7. Footer & Navigation:
   - `.mobile-footer`, `.navigatione`: Adjusts the footer and navigation layouts for mobile views, ensuring accessibility and consistency.

8. Utility Classes:
   - `.right-side-box`, `.col-12`, `.row.revarse`: Provides utility styles for layout adjustments, including column and row configurations for content alignment and spacing.

9. Responsive Design Adjustments:
   - Various media queries target specific device widths, ensuring the design remains fluid and adaptable across devices, from mobile phones to desktops, with specific breakpoints for detailed adjustments.

Purpose:
The purpose of this CSS file is to ensure that the web application's interface is visually appealing, user-friendly, and accessible across a wide range of devices. It focuses on responsive design principles, adapting layout configurations, spacing, and font sizes based on the device's screen size to provide an optimal viewing experience.

*/

@media (min-width: 1655px) and (max-width: 1770px) {
    .header-logo {
        padding-left: 40px;
    }

    .header-profile-box {
        padding-right: 40px;
    }

    .aside-bar {
        padding: 110px 40px 110px 40px;
    }

    .aside-tabs ul li a {
        font-size: 18px;
    }

    .cards {
        padding: 40px 20px;
        gap: 40px;
    }

    .goed-contain-box {
        padding: 90px 80px 60px 80px;
    }

    .meer-lock {
        width: 130px;
    }

    .horizontal-cards .card {
        height: 70px;
    }

    .horizontal-cards .img-box img {
        width: 80px;
        height: 40px;
    }

    .horizontal-cards .card {
        box-shadow: unset;
        filter: unset;
    }

    .horizontal-cards .checkbox-round {
        top: 18px;
    }

    .horizontal-cards {
        padding-top: 60px;
    }

}

@media (min-width:1365px) and (max-width:1655px) {
    .header-profile-box {
        padding-right: 30px;
    }

    .header-logo {
        padding-left: 30px;
    }

    .aside-tabs ul {
        width: 170px;
        margin: auto;
    }

    .aside-tabs ul li a {
        font-size: 17px;
    }

    .aside-tabs ul li a img {
        width: 20px;
    }

    .meer-lock {
        right: 40px;
        top: 40px;
    }

    .aside-bar {
        padding: 80px 0px 80px 0px;
    }

    /* .goed-contain-box {
        padding: 90px 120px 60px 120px;
    } */

    .goed-discription p {
        margin-bottom: 15px;
        margin-top: 15px;
    }



    .cards {
        grid-template-columns: repeat(4, 1fr);
        padding: 20px 0px;
        gap: 20px;
    }

    .card {
        position: relative;
        width: 100%;
        height: 356px;
    }

    .hover-card {
        bottom: -410px;
    }

    .jouw-checklist-main-box {
        padding: 40px;
    }

    .text-box h4 {
        left: 26px;
        right: 26px;
    }

    .circle-progresbar {
        display: flex;
        gap: 40px;
        JUSTIFY-CONTENT: center;
    }



}

@media (max-width:1199px) {
    .goed-contain-box .col-xl-7 {
        display: unset;
    }

    .meer-lock {
        top: 20px;
        right: 20px;
    }
}

@media (min-width:1199px) and (max-width:1365px) {
    .header-profile-box {
        padding-right: 30px;
    }

    .header-logo {
        padding-left: 30px;
    }

    .aside-tabs ul {
        width: 170px;
        margin: auto;
    }

    .aside-tabs ul li a {
        font-size: 17px;
    }

    .aside-tabs ul li a img {
        width: 20px;
    }

    .hover-card {
        bottom: -435px;
    }



    .aside-bar {
        padding: 80px 0px 80px 0px;
    }

    /* .goed-contain-box {
        padding: 70px 30px 0px 30px;
    } */

    .goed-discription p {
        margin-bottom: 15px;
        margin-top: 15px;
    }



    .cards {
        grid-template-columns: repeat(3, 1fr);
        /* padding: 20px 0px;
        gap: 20px; */
        padding-left: 40px;
    }

    .card {
        position: relative;
        width: 100%;
        height: 356px;
    }

    .hover-card {
        bottom: -410px;
    }

    .jouw-checklist-main-box {
        padding: 20px;
    }

    .text-box h4 {
        left: 25px;
        right: 25px;
    }

    .circle-progresbar {
        display: flex;
        gap: 10px;
        JUSTIFY-CONTENT: center;
    }

    .goed-discription p {
        font-size: 18px;

    }

    .goed-title h2 {
        font-size: 40px;
    }

    .aside-tabs ul li a {
        font-size: 18px;
    }

    .header-logo a img {
        width: 150px;
    }
}

@media (min-width:991px) and (max-width:1199px) {
    .horizontal-tabs .left-tabs-cls {
        gap: 35px;
    }

    .horizontal-tabs .tab-cls {
        padding: 7px 20px;
        font-size: 14px;
    }

    .list-view img {
        width: 25px;
    }

    .header-logo {
        padding-left: 30px;
    }

    .aside-tabs ul {
        width: 180px;
        margin: auto;
    }

    .aside-tabs ul li a {
        font-size: 19px;
    }

    .aside-tabs ul li a img {
        width: 20px;
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 67%;
    }


    .col-md-2 {
        flex: 0 0 auto;
        width: 33%;
    }

    .aside-bar {
        padding: 80px 0px 80px 0px;
    }

    .row.revarse {
        flex-direction: column-reverse;
        gap: 30px;
    }

    /* .goed-contain-box {
        padding: 70px 30px 0px 30px;
    } */

    .goed-discription p {
        max-width: 100%;
        margin-bottom: 15px;
        margin-top: 15px;
    }



    .cards {
        grid-template-columns: repeat(3, 1fr);
        padding: 20px 0px;
        gap: 20px;
    }

    .card {
        position: relative;
        width: 100%;
        height: 356px;
    }

    .hover-card {
        bottom: -410px;
    }

    .jouw-checklist-main-box {
        padding: 20px;
    }

    /* .text-box h4 {
        left: 0px;
        right: 0;
    } */

    .circle-progresbar {
        display: flex;
        gap: 40px;
        JUSTIFY-CONTENT: center;
    }

    .header-profile-box {
        padding-right: 30px;
    }

    .header-logo a img {
        width: 150px;
    }
}

@media (min-width:768px) and (max-width:991px) {

    .header-logo {
        padding-left: 30px;
    }

    .aside-tabs ul {
        width: 175px;
        margin: auto;
    }

    .aside-tabs ul li a {
        font-size: 18px;
    }

    .aside-tabs ul li a img {
        width: 20px;
    }

    .jouw-checklist-main-box {
        margin-top: 20px;
    }

    .header-input-box {
        width: 40%;
        position: relative;
    }

    p {
        font-size: 17px;
        line-height: 28px;
    }

    .goed-discription p {
        max-width: 100%;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .header-logo a img {
        width: 100%;
    }

    .header-profile-box {
        padding-right: 30px;
    }


    .header-input-box input {
        margin-left: 0px;
        padding: 8px 40px;
    }

    .header-input-box button {
        left: 17px;
        top: 13px;
    }

    .header-input-box button img {
        width: 15px;
        height: 15px;
    }

    .aside-bar {
        padding: 80px 0px 80px 0px;
    }

    .aside-tabs ul li a {
        font-size: 18px;
    }

    .aside-tabs ul li a img {
        width: 20px;
    }

    .right-side-box {
        padding: 20px 20px 20px 20px;
    }


    /* .goed-contain-box {
        padding: 70px 30px 0px 30px;
    } */

    .goed-title h2 {
        font-size: 35px;
    }

    .row.revarse {
        flex-direction: column-reverse;
        gap: 30px;
    }

    .circle-progresbar {
        gap: 0px;
        justify-content: space-between;
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 74%;
    }

    .col-md-2 {
        flex: 0 0 auto;
        width: 26%;
    }

    .pie-main-box {
        width: 140px;
    }

    .pie {
        width: 140px !important;
        height: 140px !important;
    }

    .pie svg {
        width: 140px !important;
        height: 140px !important;
    }

    .pie-main-box h3 {
        font-size: 22px;
    }

    .meer-lock {
        width: 120px;
        top: 20px;
        right: 20px;
    }

    .jouw-checklist-main-box {
        padding: 30px;
    }

    .cards {
        grid-template-columns: repeat(2, 1fr);
        padding: 40px 0px;
        /* gap: 40px; */
    }

    .card {
        position: relative;
        width: 100%;
        height: 356px;
    }

    .hover-card {
        bottom: -410px;
    }

    .header-logo a img {
        width: 150px;
    }

}

@media (max-width: 991px) {
    .horizontal-tabs .left-tabs-cls {
        gap: 30px;
    }

    .horizontal-tabs .tab-cls {
        padding: 8px 14px;
    }

    .horizontal-tabs .tab-cls {
        font-size: 12px;
    }

    .horizontal-tabs {
        padding-left: 10px;
        padding-right: 10px
    }

    .list-view img {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    iframe {
        max-width: 100%;
    }   
}

@media(max-width:767px) {


    .card:hover {
        top: unset;
    }

    text tspan {
        font-weight: 300;
        font-family: 'museo-semibold';
    }

    .mobile-footer .active-image {
        display: none;
    }

    .mobile-footer .active-tab img {
        display: none;
    }

    .mobile-footer .active-tab .active-image {
        display: block;
    }


    .fill-your-checklist.desktop-screen {
        display: none;
    }

    nav.navigatione {
        display: none;
    }

    /* nav.mobile-screen-navigetion .responsive-logo img {
        float: right;
    } */

    .horizontal-tabs {
        margin-top: 0;
    }

    .jouw-title {
        display: none;
    }

    .jouw-title h4 {
        color: #141053;
    }

h1 {
  font-size: clamp(26px, 5vw, 4rem);
word-wrap: break-word;
    hyphens: auto;
}
    .aside-bar {
        display: none;
    }

    nav.navigatione.desktop-nav {
        display: none;
    }

    .col-lg-5.goed-main-box {
        display: none;
    }

    .goed-main-box {
        filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.16));
    }

    .pie-main-box {
        width: 120px;
    }

    .pie {
        width: 120px !important;
        height: 120px !important;
    }

    .pie svg {
        width: 120px !important;
        height: 120px !important;
    }

    .meer-lock {
        display: none;
    }

    .goed-discription {
        display: none;
    }

    .circle-progresbar {

        justify-content: space-evenly;
    }

    .goed-contain-box {
        padding: 30px 30px 20px 30px;
    }

    .goed-title h2 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    footer.mein-footer {
        display: none;
    }

    .cards {
/*
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 20px 0px;
        gap: 30px;
        padding-bottom: 70px;
*/
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 20px 0px;
    padding-bottom: 70px;  
  }

    .card {
    flex: 1 1 calc(50% - 15px);
    max-width: calc(50% - 15px);
/*
        width: 100%;
        height: 200px;
*/
    }

    .mobile-footer {
        position: fixed;
        bottom: 10px;
        right: 0;
        left: 0;
    }

    .page {
        position: relative;
        height: 100vh;
    }

    .mobile-footer-main-box {
        display: flex;
        background: #3F3D56;
        width: 100%;
        justify-content: space-evenly;
        align-items: center;
        border-radius: 20px;
        padding: 10px 0 5px 0px;
    }

    .middle-box a,
    .right-box a,
    .left-box a {
        display: grid;
        width: 100px;
    }

    .middle-box {
        margin-top: -30px;
    }

    .right-box a img,
    .left-box a img {
        width: 27px;
        margin: auto;
    }

    .middle-box a img {
        width: 44px;
        margin: auto;
    }

    .middle-box a span,
    .right-box a span,
    .left-box a span {

        font-size: 8px;
        font-weight: normal;
        line-height: 20px;
        font-style: normal;
        text-align: center;
        color: #ffffff;
    }

    .right-side-box {
        background: #F5F5F5;
        border-radius: 20px;
        padding: 20px 20px 20px 20px;
        margin-top: 0px;
        height: 100%;
    }

    .jouw-checklist-main-box {
        padding: 30px;
        margin-bottom: 170px;
        padding-bottom: 70px;
        filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.16));

    }

    .pie-main-box h3 {
        font-size: 18px;
    }


    .goed-bezig-slider {
        margin-top: -130px;
    }

    .main-header {
        padding: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../image/over-elektrisch.png);
        width: 100%;
        padding: 40px 12px;
        height: 278px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .text-box h4 {
        color: #141053;
        font-size: 18px;
        position: absolute;
        bottom: 15px;
        padding: 10px;
        /* line-height: 50px; */
        left: 0;
        background: #fff;
        width: 100%;
        bottom: 0;
    }

    .hover-card {
        display: none;
    }

    .pie-main-box:nth-child(3) {
        /* margin-top: -30px; */
    }

    .mobile-footer {
        display: block;
    }

    nav.mobile-screen-navigetion {
        display: block;
    }

    .show-more {
        display: block;
    }

    .show-more a {
        font-size: 22px;
        text-align: center;
        display: block;
    }

    .checklist {
        position: absolute;
        bottom: 110px;
        width: 100%;
        right: 0;
        left: 0;
        text-align: center;
    }

    .checklist a {
        font-size: 22px;
        color: #141053;
    }

    .hidden-box {
        opacity: 0;
        transition: all 0.6s;
        display: none;
    }

    .title-box h4 {
        color: #141053;
        font-size: 18px;
    }

    .horizontal-hover-card {
        display: none;
    }

    .horizontal-cards .card:hover {
        background: unset;
    }

    .horizontal-cards .card:hover .title-box h4 {

        color: #141053;
    }

    .horizontal-cards .checkbox-round::after {
        height: 7px;
        top: 8px;
        right: 4px;
        width: 18px;
    }

    .horizontal-cards .checkbox-round {
        width: 30px;
        height: 30px;
        top: 14px;
        left: 14px;
    }

    .horizontal-cards .card {
        height: 60px;
    }

    .card-discription {
        margin-left: 55px;
        gap: 20px;
    }

    .horizontal-cards .img-box img {
        width: 80px;
        height: 40px;
    }

    .horizontal-cards .bookmark {
        height: 30px;
        width: 25px;
        background-image: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 5px, hsla(0, 0%, 100%, 0) 8px);
        padding-top: 30px;

    }

    .h-al-gedaanbox .horizontal-cards .checkbox-round::after {
        height: 17px;
        top: 3px;
        right: 4px;
        background-size: cover;
    }

    .h-al-gedaanbox .horizontal-cards .checkbox-round {
        width: 30px;
        height: 30px;
        top: 14px;
        left: 14px;
    }

    .checkbox-round {
        top: 20px;
        right: 20px;
        height: 40px;
        width: 40px;

    }

    .v-box-todo .card {
        max-width: 100%;
    }

    .horizontal-tabs .tab-cls {
        padding: 6px 10px;
        font-size: 14px;
    }


    .horizontal-tabs {
        padding-left: 0;
        padding-right: 0;
    }

    .horizontal-cards .checkbox-round[switchstatus="todo"]::after {
        height: 7px;
        width: 15px;
    }

    .horizontal-tabs .tab-cls {
        padding: 7px 12px;
        font-size: 13px;
    }


}

@media (max-width: 680px) {

    .horizontal-tabs .left-tabs-cls {
        gap: 20px;
    }
}

@media (max-width: 585px) {

    .h-al-gedaanbox .horizontal-cards .checkbox-round::after {
        height: 17px;
        top: 3px;
        right: 4px;
        background-size: cover;
        width: 18px;
    }

    .horizontal-cards .bookmark {
        height: 30px;
        width: 25px;
        background-image: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 5px, hsla(0, 0%, 100%, 0) 8px);
        padding-top: 30px;
        right: 12% !important;

    }

    .title-box h4 {
        color: #141053;
        font-size: 16px;
    }

    .horizontal-cards .checkbox-round {
        width: 25px;
        height: 25px;
        top: 17px;
    }

    .horizontal-cards .checkbox-round::after {
        height: 7px;
        top: 6px;
        right: 3px;
        width: 15px;
    }

    .horizontal-cards .img-box img {
        width: 70px;
        height: 40px;
    }

    .pie {
        width: 90px !important;
        height: 90px !important;
    }

    .pie-main-box {
        width: 90px;
    }

    .pie svg {
        width: 90px !important;
        height: 90px !important;
    }

    .pie-main-box h3 {
        font-size: 15px;
    }

    .goed-title h2 {
        font-size: 19px;
        margin-bottom: 20px;
    }

    .circle-progresbar {
        gap: 0;
    }

    .card {
        width: 100%;
        height: 150px;
    }

    .text-box h4 {
        font-size: 14px;
        line-height: 30px;

    }

    .jouw-title h3 {
        font-size: 19px;
    }

    .list-view img {
        width: 20px;
        margin-left: 7px;
    }

    .horizontal-tabs a {
        font-size: 13px;
    }


    .checkbox-round {
        top: 10px;
        right: 10px;
        width: 45px;
        height: 45px;
    }

    .checkbox-round::after {
        top: 14px;
        right: 7px;
        width: 25px;
    }

    .bookmark {
        height: 20px;
        width: 22px;
        background-image: unset;
        padding-top: 0;
        color: yellow;
    }

    .cards {
        padding-bottom: 40px;
        gap: 20px;
    }

    .checklist {
        bottom: 90px;
    }

    .jouw-checklist-main-box {
        padding: 20px;
        margin-bottom: 130px;
        padding-bottom: 40px;
    }

    .checklist a,
    .show-more a {
        font-size: 18px;
    }

    .v-box-done .checkbox-round::after {
        width: 20PX;
    }

    .text-box h4 {

        border-radius: 0 0 20px 20px;
    }

    .right-tabs-cls {
        /*display: none;*/
    }

    .horizontal-tabs .left-tabs-cls {
        gap: 34px;
    }

    .horizontal-tabs .tab-cls {
        padding: 8px 13px;
        font-size: 13px;
    }
}

@media (max-width: 479px) {
    .v-box-done .checkbox-round {
        top: 10px;
        right: 10px;
    }

    .pie.middle-progress-cls,
    .pie.middle-progress-cls svg {
        width: 80px !important;
        height: 80px !important;
    }

    .pie-main-box:nth-child(3) {
        width: 80px;
        margin-top: -10px;
    }

    .profilepage-responsive-img {
        display: none;
    }

    .card-discription {
        margin-left: 50px;
        gap: 10px;
        margin-right: 55px;
    }

    .horizontal-cards .bookmark {
        height: 30px;
        width: 20px;
        background-image: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 5px, hsla(0, 0%, 100%, 0) 8px);
        padding-top: 30px;
        right: 6% !important;
    }

    .title-box h4 {
        color: #141053;
        font-size: 14px;
        line-height: 18px;
    }

    .horizontal-cards .card {
        height: 52px;
    }

    .horizontal-cards .img-box img {
        width: 60px;
        height: 40px;
    }

    .horizontal-cards .checkbox-round {
        top: 13px;
    }

    /* .goed-contain-box {
        padding: 50px 30px 30px 30px;
    } */
    .goed-contain-box {
        padding: 20px;
    }

    .pie {
        width: 70px !important;
        height: 70px !important;
    }

    .goed-title h2 {}

    .pie-main-box {
        width: 70px;
    }

    .pie svg {
        width: 70px !important;
        height: 70px !important;
    }

    .pie-main-box h3 {
        font-size: 12px;
    }

    .goed-title h2 {
        font-size: 17px;
        margin-bottom: 20px;

    }

    .circle-progresbar {
        gap: 0;
    }

    .card {
        width: 100%;
        height: 161px;
    }

    .text-box h4 {
        font-size: 14px;
        line-height: 19px;
        height: 73px;
        padding: 6px 13px;
        display: flex;
        justify-content: start;
        align-items: center;
        border-radius: 0 0 20px 20px;
    }

    .jouw-title h3 {
        font-size: 17px;
    }

    .list-view img {
        width: 17px;
        margin-left: 7px;
    }

    .horizontal-tabs a {
        font-size: 12px;
        /* margin-right: 55px; */
    }

    /* .checkbox-round {
        width: 30px;
        height: 30px;
    } */

    /* .checkbox-round::after {
        top: 8px;
        right: 5px;
        width: 17px;
    }

    .bookmark {
        height: 20px;
        width: 22px;
        background-image: unset;
        padding-top: 30px;
        color: yellow;
    } */

    .cards {
        padding-bottom: 0px;
        gap: 15px;
    }

    .checklist {
        bottom: 80px;
    }

    .jouw-checklist-main-box {
        padding: 20px;
        margin-bottom: 100px;
        padding-bottom: 100px;
    }

    .checklist a,
    .show-more a {
        font-size: 16px;
    }

    .v-box-done .checkbox-round::after {
        width: 21PX;
        background-position: center;
        background-size: cover;
        top: 9px;
        right: 8px;
    }

    .v-box-done .checkbox-round {
        width: 45px;
        height: 45px;
    }



    .jouw-title a {
        font-size: 12px;
        color: #7C7C7C;
    }

    /* .horizontal-tabs .v-tab-todo::before {
        width: 12px;
        height: 12px;
        font-size: 7px;
        top: 2px;
        right: -15px;
    } */
    .horizontal-tabs .left-tabs-cls{
        gap:20px;
    }
    .horizontal-tabs .tab-cls {
        padding: 10px 13px;
        font-size: 14px;
    }
    .horizontal-tabs{
        display: unset;
    }
    .left-tabs-cls{
        gap: 10px;
        flex-direction: column;
        text-align: center;
    }
    .horizontal-tabs .left-tabs-cls{
        gap: 10px;
    }
}

@media (max-width: 319px) {
    .goed-title h2 {
        font-size: 15px;
        margin-bottom: 40px;
    }

    .jouw-title h3 {
        font-size: 15px;
    }

    .goed-contain-box {
        padding: 40px 20px 20px 20px;
    }
}

.col-12 {
    padding: 0px 13px;
}