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

/* -----colors -----*/
/* 
    #007dc3 - ips blue
    #272930 - dark grey



*/


html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 100%; /*background: #f3f3f3;*/  background: #fff;}

a, .btn-link { color: #007dc3; }

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

#app { position: relative; display: flex; flex-direction: column; /*height: 100%;*/ }

/*---- LOADING SCREEN ---------*/
.loading-wrapper { /*background: #f3f3f3;*/ background: #fff; min-height: 100%; width: 100%; padding: 200px 0 0 0; text-align: center; }
.loading-wrapper .loading-img { max-height: 50px; max-width: 100px; }
.loading-wrapper .loading-text { display: block; font-size: 0.9rem; color: #fff; margin: 20px 0 0 0; }
.loading-wrapper .spinner-grow { animation: spinner-grow 2s linear infinite !important; }

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

.main { flex: 1; background: #f3f3f3; }
.main-single-page { flex: 1; background: #fff; } /*White background for single-page layout -otpSign, videoId*/
.main .top-row { background-color: #007dc3; color: #fff; justify-content: flex-end; }
.main .top-row > a, .main .top-row .btn-link { color: #fff; white-space: nowrap; margin-left: 1.5rem; }
.main .top-row a:first-child { overflow: hidden; text-overflow: ellipsis; }

.sidebar { background: #272930; /* background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/ }
.sidebar .top-row { background-color: #007dc3; }
.sidebar .navbar-brand { font-size: 1.1rem; }
.sidebar .navbar-brand img { height: 32px; }
.sidebar .oi { width: 2rem; font-size: 1.1rem; vertical-align: middle; top: -2px; }
.sidebar .oi.icon-right { float: right; font-size: 0.6rem; line-height: 2.4rem; text-align: right; }
.sidebar .nav { }
.sidebar .nav-item { color: #caccd2; font-size: 0.9rem; padding-bottom: 0.5rem; }
.sidebar .nav-item:first-of-type { padding-top: 1rem; }
.sidebar .nav-item:last-of-type { padding-bottom: 1rem; }
.sidebar .nav-item a { color: #caccd2; height: 3rem; /* display: flex; */ align-items: center; line-height: 2.2rem; border-left: solid 3px transparent; }
.sidebar .nav-item a.active { /*background-color: rgba(255,255,255,0.15); */ color: #fff; border-left-color: #007dc3; }
.sidebar .nav-item a:hover { background-color: rgba(255,255,255,0.1); color: white; }

/*---- test eviroment ----*/
.test-enviroment-corner { background-color: #e44c34; background-color: #e44c34EE; box-shadow: 0px 1px 5px -1px rgba(0,0,0,0.4); height: 29px; left: -37px; position: absolute; top: 7px; width: 120px; transform: rotate(-38deg); -webkit-transform: rotate(-38deg); z-index: 5; }
.test-enviroment-corner span { color: #330902; font-size: 9.6px; left: 28px; top: 4px; position: absolute; width: 70px; text-align: center; font-weight: 600; line-height: 1.1em; }


/*custom nav item types*/
.sidebar .nav-item .nav-text { display: block; padding: .5rem 1rem; }
.sidebar .nav-item.divider { border-bottom: solid 1px rgba(255,255,255,0.13); padding: 0; margin: 0.3rem 0; }
.sidebar .nav-item-user { }
.sidebar .nav-item.nav-culture-selector { padding: .5rem 1rem; }
.sidebar .nav-item.nav-culture-selector:hover { background-color: rgba(255,255,255,0.1); color: white; padding: .5rem 1rem; }
.sidebar .nav-item.nav-culture-selector .icon{ }
.sidebar .nav-item.nav-culture-selector .custom-select { display: inline-block; width: auto; border-radius: 0; border: none; color: #caccd2; box-shadow: none; background: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23caccd2' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e) no-repeat right .75rem center/8px 10px; background-color: rgba(255,255,255,0.0); cursor:pointer;}
.sidebar .nav-item.nav-culture-selector .custom-select option { color: #333; }

/*table modifiers*/
table tr.expired { color: #aaa; display:none; }
table tr.expired td{ }
table tr.expired.expired-show { display: table-row; }

.content { padding-top: 1.1rem; padding-bottom: 30px; }
.navbar-toggler { background-color: rgba(255, 255, 255, 0.1); }

.footer { position: fixed; bottom: 0; width: calc(100vw - 250px); background: #f3f3f3; }
.footer-single-page { position: fixed; bottom: 0; width: calc(100vw - 250px); background: #fff; } /*White background for single-page layout -otpSign, videoId*/
.footer .container { padding-top: 3px; padding-bottom: 3px; padding-right: 20px; padding-left: 20px;
    }
.footer-max { width: 100%; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid red; }
.validation-message { color: red; }
#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.iframe-max { border: solid 0px #ddd; height: calc(100vh - 82px); width: calc(100% + 0px); padding: 0px; }
#signIframe { }

.card-custom { border-width: 0px 0px 2px 0px; }
.card-custom .card-body { padding: 1.25rem 1rem 1.25rem 1rem; }
.card-custom .card-header { background-color: #fff; border-bottom: 1px solid rgba(0,0,0,.05); border-top: 1px solid #fff; padding: .65rem 1rem .6rem 1rem; }
.card-icon { background: #ddd; height: 100%; width: 100%; border-radius: calc(.25rem - 1px); text-align: center }
.card-icon-icon { font-size: 50px; margin-top: 50px; }
.card .card-btn-wrapp { display: table; width: 100%; height: 100%; }
.card .card-btn-wrapp .btn { display: table-cell; vertical-align: middle; }


.alert-light { color: #717172; background-color: #f3f3f3; border-color: #e3e3e3; }
.small, small { font-size: 84%; }

/*#region -------- SCREEN SIZE QUERIES --------------*/
@media (max-width: 767.98px) { .main .top-row:not(.auth) { display: none; }

    .main .top-row.auth { justify-content: space-between; }

    .main .top-row a, .main .top-row .btn-link { margin-left: 0; }

    .table td, .table th { padding: .5rem .3rem; font-size: 0.92rem; }

    .iframe-max { margin: -18px 0px 0px -23px; width: calc(100% + 46px); height: calc(100vh - 64px); }

    .footer { width: 100vw;}
}

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

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

    .main .top-row { position: sticky; top: 0; }

    .main > div { padding-left: 2rem !important; padding-right: 1.5rem !important; }

    .navbar-toggler { display: none; }

    .sidebar .collapse { /* Never collapse the sidebar for wide screens */ display: block; }
}
/*#endregion*/

/*#region -------- error, warning, info texts -------------*/

.error-text {
    color: red;
    font-size: 0.9rem;
}
.warning-text {
    color: darkorange;
    font-size: 0.9rem;
}
.info-text {
    color: blue;
    font-size: 0.9rem;
}
/*#endregion*/