:root {

   
    --white: #FFF;
    --dark: #000;
    --dark-grey: #332F2D;
    --success: #7EB76B;
    --error: #DC4646;
    
    --border-grey: #EAEAEA;
    --light-grey: #f8f8f8;
    --border-radius: 4px;

    --card-bg: #2d2d30;
    --card-border: #e4e4e4;

    --container-width: 1040px;
  
  }

hr{
    background-color: #c1bfa9 !important;
    border: none;
    display: block;
    height: 2px;
    margin: 1.5rem 0;
}
.form-group{
    margin-bottom: 10px;
}
.form-control{
    height: 46px;
    background: white;
    border: 1px solid #b8b8b8;
    border-radius: 5px;
    padding: 0 15px;
    display: block;
    width: 100%;
    font-size: 16px;
}
.form-control.error{
    border: solid 2px #e14a4a !important;
    background: rgba(247, 191, 191, 0.2) !important;
}
.control-error{
    color: #e14a4a;
    font-size: 14px;
    margin-top: 2px;
}
.form-control:active{
    border: 1px solid var(--tone-color) !important;
}
input:focus{
    border: 1px solid var(--tone-color) !important;
}
.form-control::placeholder{
    color: #5c6080 !important;
    font-size: 16px;
}

@media (max-width: 992px){
    .contact-form{
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
@media (max-width: 600px){
    .form-group{
        width: 100%;
    }
    .form-control{
        width: 100%;
    }
    .contact-form{
        flex-direction: column;
    }
    .contact-form button{
        width: 100%;
    }
}

.card{
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    border: solid 1px var(--card-border);
}
.card.selectable{
   cursor: pointer;
}
.card.selectable:hover{
    border: solid 1px var(--tone-color);
}
.card.selectable.selected{
    border: solid 1px var(--tone-color);
}