.wrapper {font-family: ariel, helvetica, sans-serif; font-size:1.5vw;padding: 0 1vw;}
 
       :root {
            --cert-font-sizeone: 80px; /* Default font size */
            --cert-font-sizetwo: 40px; /* Default font size */
            --cert-font-sizethree: 80px; /* Default font size */
            --cert-font-sizefour: 40px; /* Default font size */
            --cert-font-sizefive: 60px; /* Default font size */
            --cert-font-sizesix: 30px; /* Default font size */
            --cert-font-sizeseven: 30px; /* Default font size */
            --cert-font-sizeeight: 20px; /* Default font size */
        }
        #certificateContainer {
            display: none;
        }
        
/* ------------------------ Header ------------*/


.header {display:flex;justify-content: center}
.header-logo {display:flex;}
.header-title {align-self:center;}
.header-elem {margin:0 2vw;}
.menu-link a:link, .menu-link a:visited { 
    background-color: #f6dce2;
    color: #f70606;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: 1px solid red;
    border-radius: 4px;
}

.linkheaderButts {display:flex;}

.partn {font-size: 1rem; color:grey}

.menu-link.linkBuy a:link, .menu-link.linkBuy a:visited { 
       background-color: #58c561;
    border-color: #58c561;
    color: #fff;
    font-weight: 700;
}

.menu-link.linkBuy a:hover, .menu-link.linkBuy a:active { 
           background-color: #399e41;
    border-color: #399e41;}
    
.menu-link.linkBuy a:link span {    font-weight: 400;
    font-size: 1.1rem;}


.header-title.header-elem {font-size:2.5vw;color:grey;}

.menu-link a:hover, .menu-link a:active {
    background: #dff3df;
    border: 1px solid green;
    color: green;
}

.frame-gallery {
    width: 100%;
    display: flex;
    margin: 1.5vw 1vw;
}
.previewFrame {}
.galleries {
    width: 35vw;
    margin-right: 1vw;
}

.button-container {}
.backs {
    display: flex;
    box-sizing: border-box;
    background: #f0f0f0;
    overflow-x: auto; 
    white-space: nowrap;
}

.back-gallery, .decs-gallery {    
    border: 1px solid grey;
    border-radius: 4px;
    margin:1vw 0; 
    white-space: nowrap;
}

.iframeHolder {margin-right:1vw;}

iframe {
    width: 60vw;
    height: 45vw;
    box-sizing: border-box;
    padding-top: 20px;
    
}


/* --------------------------- data ------------- */

.certificateList {
    height: 250px;
    border: 1px solid grey;
      overflow-y: auto; 
    overflow-x: hidden;
    border-radius: 5px;
}
        
      table {
            width: 100%;
            border-collapse: collapse;
        }
        
    thead, th {
    position: sticky;
    top: 0;
    background: #f2f2f2; /* Header background color */
    z-index: 1;
}
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
        
        tr {    
            vertical-align: top;
    font-size: 1rem;}
        
       td pre {
            white-space: pre-wrap; /* This allows wrapping of long lines */
        }

        body {color:#000;}

        .decs, .backs {
            display: flex;
            box-sizing: border-box;
            background: #f0f0f0;
            }
            
        .decs {overflow-x: auto;}
            
        .thumb img {width:100%}

/* ------------------------------- gallery ------ */

.galleries .stp:nth-child(1) {display:flex;}

.galleries #csvFileInput {    
    margin: 1vw 0;
    font-size: 1.5vw;}
    
.csvexample {margin:1vw 0;}
.csvload {display:flex;}

.step {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    border: none;
    padding: .375rem .75rem;
    line-height: 1.5;
    border-radius: 0.35rem;
    background-color: #d4e7f8;
    width: inherit;
    margin-bottom:0.4vw;
    box-sizing: border-box;
    }
    
.dataContent {width:100%;}
.dataContent .controls {width:100%;}

.button-container, .controls {
    text-align: center;
    display: flex;
    box-sizing: border-box;
    overflow-x: auto;
}

.decs-gallery .button-container, .controls {overflow-x:inherit}

.nextPrev.controls {    
    width: 100%;
    display: flex;
    margin: 0vw 0vw 1vw;
    padding: 0;}
    
.nextPrev.controls button {flex-grow:1;}

.button-container button, .controls button, .controls input {
    padding: 0.5vw 1vw;
    margin: 5px;
    cursor: pointer;
    font-size: 1.2vw;
}

.controls.dataPDF {margin: 1vw 0vw;}
.controls.dataPDF button, .nextPrev.controls button {flex-grow:1;background: #dff3df;border: 1px solid green;border-radius: 4px;}

.dataPdf {margin:1vw;}

.toggle {font-size:1vw;}

.back-gallery .button-container button {padding:0; border: 1px solid #c8c6c6;}

.gallery-container {
    display: flex;
    align-items: center;
    overflow-x: auto;
}

.thumbnail-container {
    display: flex;
    overflow-x: auto;
    padding: 4px;
     flex-wrap: nowrap;
}

.thumbnail-container img {
    max-width: 100px;
    max-height: 100px;
    margin-right: 10px;
    cursor: pointer;
}

.main-image {
    max-width: 80%;
    max-height: 80vh;
    border: 1px solid #ccc;
    padding: 10px;
}

/* ---------------- footer ----------- */

#page_footer {
    border-top: solid 1px #bbb;
    display: block;
    left: 0;
    width: 100%;
    height: 70px;
    text-align: center;
    font-size:1rem;
    margin-top:10px;
}


.foot-links {
    padding: 1vw 2vw;
}

.foot-links a {
    margin: 0 1vw;
    color: #000;
}

.foot-links a:nth-child(1) {
    margin: 0;
}

a[href] {
    text-decoration: none;
}


/* ------------------- screen sizes ----------- */


@media screen and (min-width: 1280px) {
  .wrapper {
    font-size: 1.2rem;
  }
  
  .galleries #csvFileInput {
    font-size: 1.1rem;
}

.button-container button, .controls button, .controls input {
    padding: 0.1vw 1vw;
    margin: 5px;
    cursor: pointer;
    font-size: 1vw;
}

.controls.dataPDF button, .nextPrev.controls button {
    padding: 0.4vw 1vw;
}

iframe {
    max-height: 30vw;
    max-width: 40vw;
}
.galleries {
    width: 100%;
    max-width: 53vw;
}

}

@media screen and (max-width: 1279px) {
    .csvload {display:block;}
    
    
}