:root {
    --red: #ef233c;
    --darkred: #c00424;
    --platinum: #e5e5e5;
    --black: #2b2d42;
    --white: #fff;
    --thumb: #edf2f4;
    --primary: #3193cc;
    --secondary: #81DD90;
    --success: #28a745;
    --danger: #dc3545;
    --warning: #fd7e14;
    --info: #17a2b8;
    --light: #f8f9fa;
    --dark: #343a40;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font: 14px / 24px "Roboto";
    color: var(--black);
    background: var(--platinum);
    margin: 50px 0;
}

.container {
    max-width: 2000px;
}


h1 {
  font: 40px "Georgia";
  font-size: 40px;
  margin-bottom: 1em;
}

h2 {
    font-size: 32px;
    margin-bottom: 1em;
}




@media (min-width: 500px) {
    
    .grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 10px;
    }
}

@media (min-width: 700px) {
    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
    }
}

@media (min-width: 1100px) {
    .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
    }
}

.icon{
  width: 30px
}
.locked { background-color : silver; }
.validated { background-color : lightgray; }

.invisible{
  display:none;
}
.container{
  width: 100%;
  border: 1px solid #ddd;
  padding-top: 13px;
  border-radius: 10px;
  background-color: #F9F9FA;
  color: #413C49;
  margin-top: 10px;
  padding-bottom: 13px;
  margin-bottom: 20px;
}

.error{
  color: red;
  font-weight: 600;
}

.has-error ul{
  color: red;
  list-style-type: none;
  padding-left: 0;
  padding-top: 5px;
  font-style: italic;
}

.btn-lg{
  color: #fff;
  margin: auto;
  margin-top: 30px;
}

.filter {
    display: block;
    position: sticky;
    top: 20px;
}