:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
}

html {
    min-height: 100vh;
}

select {
    padding: 0;
}


/* GRID */

.pgen_container {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.pgen_row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    align-content: stretch;
}

.pgen_container>.pgen_row:not(:last-of-type) {
    margin-bottom: 20px;
}

.pgen_col {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0;
    max-width: 100%;
    padding: 0 15px;
}

.pgen_col,
.pgen_col_1,
.pgen_col_10,
.pgen_col_11,
.pgen_col_12,
.pgen_col_2,
.pgen_col_3,
.pgen_col_4,
.pgen_col_5,
.pgen_col_6,
.pgen_col_7,
.pgen_col_8,
.pgen_col_9,
.pgen_col_auto,
.pgen_col_lg,
.pgen_col_lg_1,
.pgen_col_lg_10,
.pgen_col_lg_11,
.pgen_col_lg_12,
.pgen_col_lg_2,
.pgen_col_lg_3,
.pgen_col_lg_4,
.pgen_col_lg_5,
.pgen_col_lg_6,
.pgen_col_lg_7,
.pgen_col_lg_8,
.pgen_col_lg_9,
.pgen_col_lg_auto,
.pgen_col_md,
.pgen_col_md_1,
.pgen_col_md_10,
.pgen_col_md_11,
.pgen_col_md_12,
.pgen_col_md_2,
.pgen_col_md_3,
.pgen_col_md_4,
.pgen_col_md_5,
.pgen_col_md_6,
.pgen_col_md_7,
.pgen_col_md_8,
.pgen_col_md_9,
.pgen_col_md_auto,
.pgen_col_sm,
.pgen_col_sm_1,
.pgen_col_sm_10,
.pgen_col_sm_11,
.pgen_col_sm_12,
.pgen_col_sm_2,
.pgen_col_sm_3,
.pgen_col_sm_4,
.pgen_col_sm_5,
.pgen_col_sm_6,
.pgen_col_sm_7,
.pgen_col_sm_8,
.pgen_col_sm_9,
.pgen_col_sm_auto,
.pgen_col_xl,
.pgen_col_xl_1,
.pgen_col_xl_10,
.pgen_col_xl_11,
.pgen_col_xl_12,
.pgen_col_xl_2,
.pgen_col_xl_3,
.pgen_col_xl_4,
.pgen_col_xl_5,
.pgen_col_xl_6,
.pgen_col_xl_7,
.pgen_col_xl_8,
.pgen_col_xl_9,
.pgen_col_xl_auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

.pgen_col_12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.pgen_col_10 {
    -ms-flex: 0 0 83.3333333333%;
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
}

.pgen_col_9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}

.pgen_col_8 {
    -ms-flex: 0 0 66.6667%;
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
}

.pgen_col_7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 0 0 58.333333%;
}

.pgen_col_6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.pgen_col_5 {
    -ms-flex: 0 0 40.05524862%;
    flex: 0 0 40.05524862%;
    max-width: 40.05524862%;
}

.pgen_col_4 {
    -ms-flex: 0 0 33.3333%;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

.pgen_col_3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.pgen_col_2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.pgen_col_1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.pgen_div {
    width: 100%;
}


/* MODAL */

.pgen_modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}


/* Modal Content/Box */

.pgen_modal_content {
    background-color: #fefefe;
    margin: 10vh 10vw;
    padding: 20px;
    border: 1px solid #888;
    width: 80vw;
    height: 80vh;
    position: relative;
}


/* The Close Button */

.pgen_close {
    position: absolute;
    width: 40px;
    height: 30px;
    background-color: white;
    border-radius: 20px;
    border: 2px solid white!important;
    font-size: 30px;
    cursor: pointer;
    line-height: 1;
    box-sizing: content-box;
    right: 2px;
    top: 2px!important;
    box-shadow: inset 0 0 0 2px #525252;
    text-align: center;
}