@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: 'Roboto', sans-serif;*/
    /*font-family: 'Source Sans Pro', sans-serif;*/
    font-family: 'Lato', sans-serif;
}
body{
    color: black;
    background-color: #d4d9de;
    /*background: url("../images/bg02.png") no-repeat center center fixed;*/
    /*background: #F3F4F5;*/
    /*background: #010314;*/
    /*background: url("../images/topography_contour_map_design_1504.jpg") no-repeat center center fixed;*/
}
/*###############################################*/
/*################## HEADER #####################*/
/*###############################################*/
#border-header {
    border-bottom:  2px solid;
    border-image: linear-gradient(to right, #2956CA, #311E54, #E23C32, #EF9F3B) 1;
    /*background: rgba(255,255,255,.6)*/
}
/*###############################################*/
/*################## ERRORS #####################*/
/*###############################################*/
.is-invalid {
    color: red;
    font-size: 12px;
    max-width: 232px;
}
.is-valid {
    color: green;
    font-size: 12px;
}

/*.alert-success {
    color: green;
    background: #0080001c;
    border: 1px solid;
    padding: 5px;
    border-radius: 5px;
}*/
/*.alert-danger {
    color: red;
    background: #ff00001c;
    border: 1px solid;
    padding: 5px;
    border-radius: 5px;
}*/
.alert-success {
    color: #fff;
    background: #238636;
/*    border: 1px solid rgba(240,246,252,0.1);*/
    box-shadow: 0 0 transparent;
    padding: 5px;
    border-radius: 5px;
}
.alert-danger {
    color: #fff;
    background: #f85149;
    border: 1px solid rgba(240,246,252,0.1);
    box-shadow: 0 0 transparent;
    padding: 5px;
    border-radius: 5px;
}
.hidden {
    transition: ease-out 1.5s;
    opacity: 0;
}
/*###############################################*/
/*##############     INDEX   #####################*/
/*###############################################*/
#effect-gradiant {
    /*background: linear-gradient(to right, #2956CA, #311E54, #E23C32, #EF9F3B);*/
    background: radial-gradient(45% 100% at 50% 50%,#fff 30%,hsla(0,0%,100%,.35) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*###############################################*/
/*############## TO DO LIST #####################*/
/*###############################################*/
#color-form {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 12px;
    /*background: rgba(34,34,34,0.8);*/
}
input[type=text]:focus{
    outline: 2px solid #fd7330;     /* oranges! yey */
}
/*#background-color-gradiant {*/
/*    background: radial-gradient(140% 107.13% at 50% 90%,transparent 37.41%, #ab9184 69.27%, #b8b8b8 100%);*/
/*    border-radius: 2.4rem;*/
/*}*/