: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 */

.kh-container {
    display:block;
    width:100%;
    margin:0;
    padding:0;
}

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

.kh-container > .kh-row:not(:last-of-type){
    margin-bottom: 20px;
}

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

.kh-col, .kh-col-1, .kh-col-10, .kh-col-11, .kh-col-12, .kh-col-2, .kh-col-3, .kh-col-4, .kh-col-5, .kh-col-6, .kh-col-7, .kh-col-8, .kh-col-9, .kh-col-auto, .kh-col-lg, .kh-col-lg-1, .kh-col-lg-10, .kh-col-lg-11, .kh-col-lg-12, .kh-col-lg-2, .kh-col-lg-3, .kh-col-lg-4, .kh-col-lg-5, .kh-col-lg-6, .kh-col-lg-7, .kh-col-lg-8, .kh-col-lg-9, .kh-col-lg-auto, .kh-col-md, .kh-col-md-1, .kh-col-md-10, .kh-col-md-11, .kh-col-md-12, .kh-col-md-2, .kh-col-md-3, .kh-col-md-4, .kh-col-md-5, .kh-col-md-6, .kh-col-md-7, .kh-col-md-8, .kh-col-md-9, .kh-col-md-auto, .kh-col-sm, .kh-col-sm-1, .kh-col-sm-10, .kh-col-sm-11, .kh-col-sm-12, .kh-col-sm-2, .kh-col-sm-3, .kh-col-sm-4, .kh-col-sm-5, .kh-col-sm-6, .kh-col-sm-7, .kh-col-sm-8, .kh-col-sm-9, .kh-col-sm-auto, .kh-col-xl, .kh-col-xl-1, .kh-col-xl-10, .kh-col-xl-11, .kh-col-xl-12, .kh-col-xl-2, .kh-col-xl-3, .kh-col-xl-4, .kh-col-xl-5, .kh-col-xl-6, .kh-col-xl-7, .kh-col-xl-8, .kh-col-xl-9, .kh-col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.kh-col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.kh-col-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; 
}

.kh-col-8 {
    -ms-flex: 0 0 66.6667%;
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
}

.kh-col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.kh-col-4 {
    -ms-flex: 0 0 33.3333%;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;   
}

.kh-col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; 
}

.kh-col-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%; 
}


.kh-div {
    width:100%;
}

/* MODAL */

.kh-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 */
.kh-modal-content {
background-color: #fefefe;
margin: 10vh 10vw;
padding: 20px;
border: 1px solid #888;
width: 80vw;
height: 80vh;
position:relative;
}
  
/* The Close Button */
.kh-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;
}