body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    background: #034EA1;
    color: #000000;
    font: 12px Arial, Helvetica, sans-serif;
    height: 100vh;
    overflow: hidden;
}

.page-title {
    margin:0;
    margin-bottom: 16px;
    padding: 0;
    color:#034EA1;
    font-size:24px;
}

main {
    margin: 0;
    padding: 16px;
    padding-bottom: 64px;
    width: 100vw;
    height: 100vh;
    background: url('../img/bg.png') top left no-repeat;
    background-size: cover;
    overflow-y: scroll;
    background-attachment: fixed;
}

.bg-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url('../img/bg_menu.jpg') top left no-repeat;
    background-size: 100% 100%;
}

input::placeholder, .form-control::placeholder {
    color: rgba(0, 0, 0, 0.3);
    opacity: 1;
}

.btn {
    padding: 10px;
    border: none;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    background-color: #dddddd;
}

.btn-primary {
    color: #FFFFFF;
    background: -moz-linear-gradient(34.21% -119.62% -58.66deg, rgba(63, 154, 213, 1) 0%, rgba(3, 78, 161, 1) 100%);
    background: -webkit-linear-gradient(-58.66deg, rgba(63, 154, 213, 1) 0%, rgba(3, 78, 161, 1) 100%);
    background: -webkit-gradient(linear, 34.21% -119.62%, 75.91% 328.28%, color-stop(0, rgba(63, 154, 213, 1)), color-stop(1, rgba(3, 78, 161, 1)));
    background: -o-linear-gradient(-58.66deg, rgba(63, 154, 213, 1) 0%, rgba(3, 78, 161, 1) 100%);
    background: -ms-linear-gradient(-58.66deg, rgba(63, 154, 213, 1) 0%, rgba(3, 78, 161, 1) 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3F9AD5', endColorstr='#034EA1' ,GradientType=0)";
    background: linear-gradient(148.66deg, rgba(63, 154, 213, 1) 0%, rgba(3, 78, 161, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3F9AD5', endColorstr='#034EA1', GradientType=1);
}

.btn-secondary {
    color: #FFFFFF;
    background: -moz-linear-gradient(17.04% 129.59% 19.15deg, rgba(242, 110, 33, 1) 10.74%, rgba(244, 129, 34, 1) 25.45%, rgba(252, 189, 38, 1) 75.93%, rgba(255, 213, 40, 1) 100%);
    background: -webkit-linear-gradient(19.15deg, rgba(242, 110, 33, 1) 10.74%, rgba(244, 129, 34, 1) 25.45%, rgba(252, 189, 38, 1) 75.93%, rgba(255, 213, 40, 1) 100%);
    background: -webkit-gradient(linear, 17.04% 129.59%, 99.3% -69.03%, color-stop(0.1074, rgba(242, 110, 33, 1)), color-stop(0.2545, rgba(244, 129, 34, 1)), color-stop(0.7593, rgba(252, 189, 38, 1)), color-stop(1, rgba(255, 213, 40, 1)));
    background: -o-linear-gradient(19.15deg, rgba(242, 110, 33, 1) 10.74%, rgba(244, 129, 34, 1) 25.45%, rgba(252, 189, 38, 1) 75.93%, rgba(255, 213, 40, 1) 100%);
    background: -ms-linear-gradient(19.15deg, rgba(242, 110, 33, 1) 10.74%, rgba(244, 129, 34, 1) 25.45%, rgba(252, 189, 38, 1) 75.93%, rgba(255, 213, 40, 1) 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F26E21', endColorstr='#FFD528' ,GradientType=0)";
    background: linear-gradient(70.85deg, rgba(242, 110, 33, 1) 10.74%, rgba(244, 129, 34, 1) 25.45%, rgba(252, 189, 38, 1) 75.93%, rgba(255, 213, 40, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F26E21', endColorstr='#FFD528', GradientType=1);
}

.btn-primary, .btn-secondary {
    border-radius: 15px 0px 15px 0px  / 15px 0px 15px 0px;
    -moz-border-radius: 15px 15px 0px 0px  / 15px 0px 15px 0px;
    -webkit-border-radius: 15px 0px 15px 0px  / 15px 0px 15px 0px;
    box-shadow: #999 2px 2px 4px;
}

.alert {
    position: relative;
    padding: 1rem;
    border-radius: .355rem;
}

.alert-danger {
    color: #58151c;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

@media screen and (min-width: 768px) {
    main {
        margin: 0 auto;
        max-width: 500px;
        background-size: contain;
        background-position-y: center;
        background-attachment: unset;
    }
}