body {
    /* background-color: #c1c6cc; */
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    background-color: rgb(241, 241, 241);
}

*,
::before,
::after {

    box-sizing: border-box;

    margin: 0;
    padding: 0;
}

    

li {
    position: relative;
    padding-left: 0px;
    /*padding-bottom: 15px;*/
}

a:link {
    text-decoration: none;
}


a {
    color: #00B7FF;
}

/*
input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}
*/


.rouge { color:red }
.vert { color:green }


.no-border { border: none}


.flex-col { display: flex;flex-direction: column; }
.flex-col { display: flex;flex-direction: column; }
.flex-row { display: flex;flex-direction: row; }
.flex-row { display: flex;flex-direction: row; }

.flex-col-10 { display: flex;flex-direction: column;gap:10px }
.flex-col-20 { display: flex;flex-direction: column;gap:20px }
.flex-row-10 { display: flex;flex-direction: row;gap:10px }
.flex-row-20 { display: flex;flex-direction: row;gap:20px }

.ms500 { margin-left: 500px;}
.ms450 { margin-left: 450px;}
.ms400 { margin-left: 400px;}
.ms350 { margin-left: 350px;}
.ms300 { margin-left: 300px;}
.ms250 { margin-left: 250px;}
.ms200 { margin-left: 200px;}
.ms150 { margin-left: 150px;}
.ms100 { margin-left: 100px;}


.ms50 { margin-left: 50px;}
.ms40 { margin-left: 40px;}
.ms30 { margin-left: 30px;}
.ms20 { margin-left: 20px;}
.ms10 { margin-left: 10px;}
.ms5  { margin-left:  5px;}



.me500 { margin-right: 500px;}
.me450 { margin-right: 450px;}
.me400 { margin-right: 400px;}
.me350 { margin-right: 350px;}
.me300 { margin-right: 300px;}
.me250 { margin-right: 250px;}
.me200 { margin-right: 200px;}
.me150 { margin-right: 150px;}
.me100 { margin-right: 100px;}

.me50 { margin-right: 50px;}
.me40 { margin-right: 40px;}
.me30 { margin-right: 30px;}
.me20 { margin-right: 20px;}
.me10 { margin-right: 10px;}
.me5  { margin-right:  5px;}

.ml50 { margin-left: 50px;}
.ml40 { margin-left: 40px;}
.ml30 { margin-left: 30px;}
.ml20 { margin-left: 20px;}
.ml15 { margin-left: 15px;}
.ml10 { margin-left: 10px;}

.mt50 { margin-top: 50px;}
.mt40 { margin-top: 40px;}
.mt30 { margin-top: 30px;}
.mt20 { margin-top: 20px;}
.mt15 { margin-top: 15px;}
.mt10 { margin-top: 10px;}

.mb50 { margin-bottom: 50px;}
.mb40 { margin-bottom: 40px;}
.mb30 { margin-bottom: 30px;}
.mb20 { margin-bottom: 20px;}
.mb15 { margin-bottom: 15px;}
.mb10 { margin-bottom: 10px;}

.mv50 { margin-bottom: 50px; margin-top: 50px;}
.mv40 { margin-bottom: 40px; margin-top: 40px;}
.mv30 { margin-bottom: 30px; margin-top: 30px;}
.mv20 { margin-bottom: 20px; margin-top: 20px;}
.mv15 { margin-bottom: 15px; margin-top: 15px;}
.mv10 { margin-bottom: 10px; margin-top: 10px;}


.ps50 { padding-left: 50px;}
.ps40 { padding-left: 40px;}
.ps30 { padding-left: 30px;}
.ps20 { padding-left: 20px;}
.ps10 { padding-left: 10px;}
.ps5 { padding-left: 10px;}

.pl50 { padding-left: 50px;}
.pl40 { padding-left: 40px;}
.pl30 { padding-left: 30px;}
.pl20 { padding-left: 20px;}
.pl15 { padding-left: 15px;}
.pl10 { padding-left: 10px;}

.pt50 { padding-top: 50px;}
.pt40 { padding-top: 40px;}
.pt30 { padding-top: 30px;}
.pt20 { padding-top: 20px;}
.pt15 { padding-top: 15px;}
.pt10 { padding-top: 10px;}

.pb50 { padding-bottom: 50px;}
.pb40 { padding-bottom: 40px;}
.pb30 { padding-bottom: 30px;}
.pb20 { padding-bottom: 20px;}
.pb15 { padding-bottom: 15px;}
.pb10 { padding-bottom: 10px;}

.pv50 { padding-bottom: 50px; padding-top: 50px;}
.pv40 { padding-bottom: 40px; padding-top: 40px;}
.pv30 { padding-bottom: 30px; padding-top: 30px;}
.pv20 { padding-bottom: 20px; padding-top: 20px;}
.pv15 { padding-bottom: 15px; padding-top: 15px;}
.pv10 { padding-bottom: 10px; padding-top: 10px;}


.w50  { width:50px}
.w100 { width:100px}
.w150 { width:150px}
.w200 { width:200px}
.w250 { width:250px}
.w300 { width:300px}
.w350 { width:350px}
.w400 { width:400px}
.w450 { width:450px}

.h50  { height:50px}
.h100 { height:100px}
.h150 { height:150px}
.h200 { height:200px}
.h250 { height:250px}
.h300 { height:300px}
.h350 { height:350px}
.h400 { height:400px}
.h450 { height:450px}




@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");



/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}




/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden;
    /* Hidden by default. Visible on click */
    min-width: 250px;
    /* Set a default minimum width */
    margin-left: -125px;
    /* Divide value of min-width by 2 */
    background-color: rgb(87, 175, 99);
    /* Black background color */
    color: #fff;
    /* White text color */
    text-align: center;
    /* Centered text */
    border-radius: 2px;
    /* Rounded borders */
    padding: 16px;
    /* Padding */
    position: fixed;
    /* Sit on top of the screen */
    z-index: 1;
    /* Add a z-index if needed */
    left: 50%;
    /* Center the snackbar */
    bottom: 30px;
    /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible;
    /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}





/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/*
width: 100%;
max-width: 32rem;
*/
.modal-content {
    background-color: white;
    border-radius: var(--radius-lg);
    padding: 2rem;
    
    
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(20px);
    transition: var(--transition);
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 4px;
}

.dimension-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3000;
}

.dimension-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 24px;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

.measure-modal-content {

    max-width: 1200px;
    max-height: 80vh;
    overflow-y: auto;
}