.Button {
    background-color: transparent;
    display: inline-block;
    outline: none;
    color: white;
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    padding: 5px 20px;
    margin: 1vh 3vw;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    border-radius: 0.25rem;
}

.Normal {
    border: none;
    background-color: #ccc;
}

.Bordered {
    border: 2px solid black;
}

.BlackText {
    color: black;
}

.Button:disabled{
    color: #ccc;
    background-color: #ddd;
    border: 2px solid #ccc;
    cursor: not-allowed;
}

.Success {
    background-color: chartreuse;
}

.Outline-Success {
    color: chartreuse;
    border: 2px solid chartreuse;
    background-color: transparent;
}

.Selection {
    background-color: rgb(55, 231, 20);
}

.Outline-Selection {
    color: rgb(58, 121, 135);
    border: 2px solid rgb(58, 121, 135);
    background-color: transparent;
}

.Danger {
    background-color: #fa1010;
}

.Outline-Danger {
    color: #fa1010;
    border: 2px solid #fa1010;
    background-color: transparent;
}

.Primary {
    background-color: #04a8f3;
}

.Outline-Primary {
    color: #04a8f3;
    border: 2px solid #04a8f3;
    background-color: transparent;
}

.Warning {
    background-color: #ffca2c;
}

.Outline-Warning {
    color: #ffca2c;
    border: 2px solid #ffca2c;
    background-color: transparent;
}

.Info {
    background-color: #ac9454;
}

.Outline-Info {
    color: #ac9454;
    border: 2px solid #ac9454;
    background-color: transparent;
}

.Button:hover {
    color: black;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}

.BlackText:hover {
    color: white;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}

.Button:active {
    box-shadow: none;
    transform: translateY(0);
}

.Button:focus {
    border: 5px solid black;
}

.Outline-Success:hover {
    color: white;
    background-color: chartreuse;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}

.Outline-Success:active {
    box-shadow: none;
    transform: translateY(0);
}

.Outline-Success:focus {
    border: 5px solid chartreuse;
}

.Outline-Selection:hover {
    color: white;
    background-color: rgb(58, 121, 135);
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}

.Outline-Selection:active {
    box-shadow: none;
    transform: translateY(0);
}

.Outline-Selection:focus {
    border: 5px solid rgb(58, 121, 135);
}

.Outline-Danger:hover {
    color: white;
    background-color: #fa1010;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}

.Outline-Danger:active {
    box-shadow: none;
    transform: translateY(0);
}

.Outline-Danger:focus {
    border: 5px solid #fa1010;
}

.Outline-Primary:hover {
    color: white;
    background-color: #04a8f3;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}

.Outline-Primary:active {
    box-shadow: none;
    transform: translateY(0);
}

.Outline-Primary:focus {
    border: 5px solid #04a8f3;
}

.Outline-Warning:hover {
    color: white;
    background-color: #ffca2c;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}

.Outline-Warning:active {
    box-shadow: none;
    transform: translateY(0);
}

.Outline-Warning:focus {
    border: 5px solid #ffca2c;
}

.Outline-Info:hover {
    color: white;
    background-color: #ac9454;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}

.Outline-Info:active {
    box-shadow: none;
    transform: translateY(0);
}

.Outline-Info:focus {
    border: 5px solid #ac9454;
}

.Small {
    font-size: 1rem;
    padding: 3px 13px;
}

.outer-div-devise {
    background-color: rgb(162, 218, 224);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 10vh 3vw;
    padding: 10px;
    max-width: 80vw;
    min-width: 80vw;
    min-height: 320px;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    -moz-border-radius: 22px;
    border-radius: 22px;
}

.outer-div-devise .form__group {
    display:flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.outer-div-devise .form-actions {
    margin-bottom: 10px;
}

.login .form-inputs .form__group:nth-child(3) {
    display: flex;
    flex-direction: row;
} 

.error-message-small {
    color: #842029;
    background-color: #f8d7da;
    margin-bottom: 1vh;
    padding: 1.5vh 2vw;
    width: 30vw;
    border: #f5c2c7 solid 1px;
    text-align: center;
    margin-bottom: 2vh;
}


@media only screen and (min-width: 600px) {

    .outer-div-devise {
        margin: 10vh 20vw;
        padding: 15px;
        max-width: 60%;
        min-width: 60%;
    }

}
.home { 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; 
}

.home h1 {
    font-size: 50px;
    font-weight: 600;
    background-image: radial-gradient(#553c9a, #ee4b2b);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    margin: 25px!important;
    text-shadow:    2px 2px 4px rgba(179, 147, 211, 0.1),
                    3px 4px 4px rgba(179, 147, 211, 0.15),
                    4px 6px 4px rgba(179, 147, 211, 0.2),
                    5px 8px 4px rgba(179, 147, 211, 0.25);
}

.imagediv {
    width: 60vw;
    height:45vh;
    margin-top: 5vh;
    margin-bottom: 10vh;
}

.imagediv img {
    width: 100%;
    height: 100%;
}

.buttondiv {
    display: flex;
    flex-direction: row;
}

@media only screen and (min-width: 500px) {

    .home h1 {
        font-size: 70px;
    }

    .imagediv {
        width: 60vw;
        height:50vh;
        margin-top: 2vh;
    }

}
.header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: antiquewhite;
    margin-bottom: 3vh;
}

.actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding-bottom: 2vh;
}

.actions button {
    margin-bottom: 2vh;
}

.index {
    background-color:azure;
    display: flex;
    flex-direction: column;
    padding: 2vh 0;
}

.quote {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vh;
    margin-top: 2vh;
    padding-left: 1vw;
}

.quoteform {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2vh;
    margin-top: 0.5vh;
}

.quote__actions {
    display: flex;
    margin-right: 2vw;
    align-items: baseline;
}

.quote__actions button {
    margin-right: 3vw;
}

.form__group input {
    margin-left: 2px;
}

.createquote {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    padding: 5vh 0 5vh 0;
    background-color: #ccc;

}

.form input[type=submit] {
    margin-top: 2vh;
}

.form input[type="text"] {
    width: 70vw;
}


.error-message {
    color: #842029;
    background-color: #f8d7da;
    margin-bottom: 1vh;
    padding: 1.5vh 2vw;
    width: 70vw;
    border: #f5c2c7 solid 1px;
    text-align: center;
}

.form-input {
    display: flex;
    flex-direction: column;
    align-items: center;
}


@media only screen and (min-width: 600px) {

    .header{
        display: flex;
        flex-direction:  row;
        justify-content: space-between;
        align-items: baseline;
    }
    
    .actions {
        display: flex;
        flex-direction: row;
        align-items: baseline;
    }
    .title {
        margin-left: 2vh;
    }    

}

@media only screen and (min-width: 700px) {

    .quoteform {
        flex-direction: column;
        padding-left: 5vw;
        align-items: baseline;
    }
    .form input[type=submit] {
        margin-left: 10vw;
        margin-right: 5vw;
        margin-top: unset;
    }
    .createquote {
        flex-direction: row;
        justify-content: space-around;
        padding: 5vh 1vw 5vh 0;
        align-items: baseline;
    }
    .form-input {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 2vh;
    }
    .error-message {
        width: 80vw;
    }
    .form input[type="text"] {
        width: 45vw;
    }
    
}

@media only screen and (min-width: 820px) {

    .form input[type=submit] {
        margin-left: 20vw;
    }
    .form input[type="text"] {
        width: 40vw;
    }

}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 @import "quotes.css";
 @import "credentials.css";
 @import "buttons.css";

body {
    padding: 0.25rem;
    box-sizing: border-box;
    background-color: #eee;
}