@import url(../fonts/font-roboto.min.css);
@import url(../fonts/font-recursive.min.css);
:root {
    /**colors definition primary**/
    --blue-brightest: #a7d4ff;
    --blue-brighter: #5DACF6;
    --blue-bright: #1588F3;
    --blue-medium: #084E8F;
    --blue-dark: #063A6C;
    --blue-darker: #031B34;
    --blue-darker-sub: #031b349c;

    /**grays color**/
    --gray-bright: #F2F2F2;
    --gray-medium: #C6C6C6;
    --gray-dark: #9B9B9B;
    --gray-darker: #303030;
    --gray-darker-sub: #1f1f1f;

    /**other colors contrast**/
    --color-constrast-danger: #ed5565;
    --color-constrast-sucess: #219453;
    --color-contrast-warning: #FC6D00;


    /**other colors light**/
    --color-light-danger: #EF818D;
    --color-light-sucess: #68BC8D;
    --color-light-blue: #264A6D;
    --color-light-warning: #FFE0C8;

    /**font family**/
    --font-family: "Roboto", sans-serif;
    /**font monospace**/
    --font-monospaced: 'Recursive', sans-serif;

    /**border radius**/
    --border-radius: 3px;
}

/**geral*/

body {
    font-family: var(--font-family);
    overflow: hidden;
}

.bg-login{
    background-color: var(--blue-darker);
}

.bg-image{
    background-image: url('../img/background.webp');
    position: absolute;
    opacity: 20%;
    height: 100vh;
    width: 100vw;
}

.main {
    margin: 0 auto;
}

.logo-sentry {
    width: 150px;
}

.img-city {
    width: 125px;
    display: flex;
    justify-self: center;
    margin-top: 10px;
}

.logo-sentry-sm {
    width: 100px;
}

#footer {
    display: flex;
    flex-direction: column;
    align-self: center;
    width: 100vw;
    background-color: var(--blue-darker);
    color: white;
    font-size: 10px;
    text-align: center;
    justify-self: anchor-center;
    margin-top: auto !important;
    margin-bottom: 0 !important;
}

.authVersionField {
    display: flex;
    color: white;
    font-size: 12px;
    text-align: center;
    align-self: center;
    justify-self: center;
}

.card-login {
    align-self: center;
    width: 420px;
    border-radius: 6px;
    background: white;
    border: 1px solid var(--gray-medium);
    box-shadow: 0px 2px 13px rgb(0 0 0 / 59%);
    padding: 30px;
    position: relative;
    margin-top: auto !important;
}

.account-info {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.account-info-sm {
    width: 65%;
    height: 65%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.name-city {
    text-transform: uppercase;
    text-align: center;
    padding-top: 10px;
    font-weight: bold;
}

.left-inner-addon {
    position: relative;
}

.left-inner-addon i {
    position: absolute;
    padding: 10px 12px;
    pointer-events: none;
    color: var(--gray-dark);
}

.right-inner-addon {
    position: relative;
    right: 0;
}

.right-inner-addon i {
    position: absolute;
    padding: 10px 12px;
    pointer-events: none;
    color: var(--gray-medium);
}

/**btns**/
.btn {
    letter-spacing: 0.005em;
    text-transform: none;
}

.btn-success {
    background-color: var(--color-constrast-sucess);
    border: 1px solid var(--color-constrast-sucess);
    box-shadow: none;
    /* font-size: 15px; */
    /* font-weight: 700; */
}

.btn-success:hover {
    background: var(--color-light-sucess);
    border: 1px solid var(--color-light-sucess);
    box-shadow: none;
    /* font-size: 15px; */
    /* font-weight: 700; */
}

.btn-primary {
    font-weight: normal;
    background: var(--blue-dark);
    border: 1px solid var(--blue-dark);
    box-shadow: none;
    font-weight: normal;
}

.btn-primary:hover {
    background: var(--color-light-blue);
    border: 1px solid var(--color-light-blue);
    box-shadow: none;
}

.btn-group-sm>[class*=btn-outline-].btn,
[class*=btn-outline-].btn-sm {
    padding: 5px 15px;
}

.btn-outline-light {
    background: white;
    border: 1px solid var(--gray-darker);
    color: var(--gray-darker);
}

.btn-outline-light:hover {
    background: white;
    border: 1px solid var(--gray-darker-sub);
    color: var(--gray-darker);
}

.btn-default {
    color: var(--blue-dark) !important;
    background: transparent;
    border: 1px solid var(--blue-dark);
    font-weight: 500;
    height: 35px !important;
}

.btn-default:hover {
    color: var(--blue-medium);
    background: var(--gray-bright);
    border: 1px solid var(--blue-medium);
    font-weight: 500;
    height: 35px !important;
}

.btn-default:focus {
    color: var(--blue-medium);
    background: var(--gray-bright);
    border: 1px solid var(--blue-medium);
    font-weight: 500;
    height: 35px !important;
}

.btn-default:target {
    color: var(--blue-medium);
    background: var(--gray-bright);
    border: 1px solid var(--blue-medium);
    font-weight: 500;
    height: 35px !important;
}

.btn-default.active[disabled],
.btn-default.disabled,
.btn-default.disabled.active,
.btn-default.disabled:active,
.btn-default.disabled:focus,
.btn-default.disabled:hover,
.btn-default[disabled],
.btn-default[disabled]:active,
.btn-default[disabled]:focus,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default,
fieldset[disabled] .btn-default.active,
fieldset[disabled] .btn-default:active,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default:hover {
    color: var(--gray-dark);
    /* height: 32px !important; */
}

/**validation**/
.error {
    padding: 10px;
    text-align: center;
}

.error-message {
    color: var(--color-constrast-danger);
}

.password-reset {
    text-align: center;
    color: #1f75cb;
    cursor: pointer;
}

p span:hover {
    text-decoration: underline;
}

.buttons {
    display: flex;
    justify-content: center;
    margin-top: 3px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.buttons .btn-custom {
    width: 50%;
    text-align: center;
    cursor: pointer;
    padding: 4.5px;
}

.buttons .btn-custom:first-child {border-right: 1px solid #e0e0e0;}

.buttons .btn-custom:hover, .buttons .btn-custom.active {
    background: #f7f5f5;
    color: #1f75cb;
}

#loader-login .background {
    position: absolute;
    width: 101%;
    height: 101%;
    top: -1px;
    left: -1px;
    background: #00000073;
    z-index: 99;
}


#loader-login .loader,
#loader-login .loader:after {
    border-radius: 50%;
    width: 5em;
    height: 5em;
}

#loader-login .loader {
    position: absolute;
    z-index: 9999;
    left: 44%;
    top: 48%;
    font-size: 8px;
    border-top: 1em solid #fff;
    border-right: 1em solid #fff;
    border-bottom: 1em solid #fff;
    border-left: 1em solid var(--blue-dark);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

span#infoPassword {
    cursor: pointer;
    pointer-events: auto;
    color: #f8bd86;
}

span#infoPassword:hover {
    color: #ff932e;
}

input#password {
    padding-right: 32px;
}

.send-code {
    color: #797979;
    text-align: center;
    align-items: center;
    font-size: 16px;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.send-code-password {
    font-size: 16px;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 1.5rem 1.5rem 1.0rem 1.5rem;
}

.text {
    color: #303030;
    text-align: center;
    align-items: center;
    font-size: 16px;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.text-center {
    text-align: center;
    align-items: center;
}

.btn-outline-primary {
    font-weight: normal;
    background: transparent;
    border: 1px solid var(--blue-dark);
    color: var(--blue-dark);
    box-shadow: none;
    font-weight: normal;
}

.btn-outline-primary:hover {
    background-color: #ABCAEA;
    box-shadow: none;
}

@media screen and (max-width: 1000px) {
    .box-login {
        width: 100%;
        position: relative;
        transform: initial;
    }

    span.btn-custom {
        font-size: 12px;
    }
}

span.is-valid {
    color: #198754;
}

span.is-invalid {
    color: #dc4c64;
}

.send-code-text {
    color: #999;
    font-size: 13px;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-align: center;
}

.send-code-text-blue {
    color: var(--blue-dark);
    font-size: 13px;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-align: center;
}

.underline {
    cursor: pointer;
}

.underline:hover {
    text-decoration: underline;
}

.underline.disable:hover {
    text-decoration: underline;
}

.close {
    border: none;
    background: inherit;
}

.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sweet-alert button.confirm {
    color: #ffffff !important;
    background-color: var(--blue-dark) !important;
}

.card-option {
    height: 80px;
    width: 300px;
    background-color: #EEEEEE !important;
    border-radius: 6px;
    border: 0 !important;
    box-shadow: none !important;
}

.card-option:hover {
    background-color: #e1e1e1 !important;
    cursor: pointer;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
}

.selected {
    background-color: #c2c2c2 !important;
}

.input-hash {
    width: 35px;
    height: 35px;
    margin-right: 10px;
    text-align: center;
    font-size: 20px;
}

.hash {
    gap: 15px;
}

.hash .form-outline {
    width: 35px !important;
    height: 35px !important;
}

.hash .form-outline .form-control {
    font-size: 14px;
    padding: .45em .75em !important;
}

.row-contact{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

#admin-phone-icon{
    margin-right: -1rem
}

.admin-description{
    padding-right: .25rem;
}

.row-contact{
    padding-top: 1.15rem;
}