@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

:root{
    --primary: hsl(211, 96%, 30%);
    --primary-hover: hsl(211, 96%, 27%);
    --primary-op: hsla(211, 96%, 30%, 0.5);
}

.bg-cima{
    background-color: var(--primary);
}

.main-body{
    min-height: 100vh;
    font-family: 'Lato', sans-serif;
}

.main-navbar{
    box-shadow: 0 0 6px #000;
    height: 70px;
    margin: 0;
}

.main-navbar__logo{
    height: 100%;
    display: flex;
    justify-content: center;
}

.main-background{
    height: 8rem;
}

.main-background::before{
    z-index: -1;
    top: 0;
    content: '';
    display: block;
    background-color: var(--primary);
    width: 100%;
    height: 200%;
}

.main-content{
    display: flex;
    justify-content: center;
}

.main-panel-title{
    font-weight: bold;
    margin: 0;
    text-align: center;
}

.panel{
    border-radius: 0;
    margin-top: -2rem;
    box-shadow: 0 2px 2px hsla(0, 0%, 0%, 0.5);
}

.col-xs-12{
    margin-bottom: 1.5rem;
}

.col-xs-12:nth-child(3){
    margin-bottom: 0;
}

.panel-body__content{
    font-weight: normal;
}

.panel-body__content__icon{
    position: relative;
}

.panel-body__content__icon span{
    position: absolute;
    top: calc(50% - 7px);
    left: 10px;
    display: block;
}

.form-control{
    border-radius: 0;
    padding-left: 3rem;
    height: 38px;
}

.form-control:focus {
    border-color: var(--primary);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px var(--primary-op);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px var(--primary-op);
}

.panel-body__button{
    display: flex;
    justify-content: center;
}

.btn-cima{
    background-color: var(--primary);
    color: #fff !important;
    border-radius: 0;
    transition: all 0.3s;
}

.btn-cima:hover{
    background-color: var(--primary-hover);
}

.btn.active.focus, 
.btn.active:focus, 
.btn.focus, 
.btn:active.focus, 
.btn:active:focus, 
.btn:focus {
    outline: none;
}

.btn-cima:active{
    transform: scale(0.95);
}