@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color:#F5F5F5; }
app { position: relative; display: flex; flex-direction: column; }

.loading { display:block; margin:40px auto;  max-width: 50px; }

.card-empresa:hover { box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important; transition: all 200ms ease-out; }

a, .btn-link { color: #0366d6; }

.btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; }


.top-row { height: 3.5rem; display: flex; align-items: center; }

.main { flex: 1; }
.main .top-row { background-color: #f7f7f7; border-bottom: 1px solid #d6d5d5; justify-content: flex-end; }
.main .top-row > a { margin-left: 1.5rem; }

.sidebar { background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); }
.sidebar .top-row { background-color: rgba(0,0,0,0.4); }
.sidebar .navbar-brand { font-size: 1.1rem; }
.sidebar .oi { width: 2rem; font-size: 1.1rem; vertical-align: text-top; top: -2px; }

.nav-item { font-size:0.9rem; }
.nav-item:first-of-type { padding-top: 1rem; }
.nav-item:last-of-type { padding-bottom: 1rem; }
.nav-item a { color:#d7d7d7; height:3rem; display:flex; align-items:center; line-height:3rem; }
.nav-item a.active { background-color: rgba(255,255,255,0.25); color: white; }
.nav-item a:hover { background-color: rgba(255,255,255,0.1); color: white; }

.content { padding-top: 1.1rem; }

.navbar-toggler { background-color: rgba(255, 255, 255, 0.1); }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid red; }
.validation-message { color: red; }

.delete-link a { text-decoration:underline; color:#c0392b;  }

@media (max-width: 767.98px) {
    .main .top-row { display: none; }
}

@media (min-width: 768px) {
    app { flex-direction: row; }

    .sidebar { width: 250px; height: 100vh; position: sticky; top: 0; }
    .sidebar .collapse { display: block; }

    .main .top-row { position: sticky; top: 0; }
    .main > div { padding-left: 2rem !important; padding-right: 1.5rem !important; }

    .navbar-toggler { display: none; }
}