@font-face {font-display: fallback; font-family: "Century Gothic"; src: url("../../../hub/assets/fonts/GOTHIC.TTF"); font-weight: normal; font-style: normal;}
@font-face {font-display: fallback; font-family: "Century Gothic"; src: url("../../../hub/assets/fonts/GOTHICB.TTF"); font-weight: bold; font-style: normal;}
@font-face {font-display: fallback; font-family: "Century Gothic"; src: url("../../../hub/assets/fonts/GOTHICI.TTF"); font-weight: normal; font-style: italic;}
@font-face {font-display: fallback; font-family: "Century Gothic"; src: url("../../../hub/assets/fonts/GOTHICBI.TTF"); font-weight: bold; font-style: italic;}

* {margin: 0; padding: 0; box-sizing: border-box;}
html, body {height: 100%;}
body {background: #236cb5 url(../../../hub/assets/images/dark-blue.jpg) no-repeat fixed; background-size: cover; background-position: center; font-family: "Century Gothic"; font-size: 16px; letter-spacing: 1px; color: #fff;}
a {color: inherit; text-decoration: none; outline: none;}
table {width: 100%;}
table, th, td {border-collapse: collapse; text-align: left;}
ul > li {list-style: none;}
:active, :focus {outline: 0;}

.wrapper {position: relative; min-height: 100%; margin: 0 auto;}
.spacer {clear: both; height: 0px;}
.nav-link {cursor: pointer;}
.invalid {border: thin solid red !important; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(233, 102, 102, 0.6) !important; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(233, 102, 102, 0.6) !important;}
.hidden {display: none !important;}
.row {display: table; width: 100%;}
.card {position: relative; padding: 1em; background-color: rgba(0, 0, 0, 0.2);}

.text {padding: 5px 6px; background-color: rgba(255, 255, 255, 0.1); border: thin solid rgba(255, 255, 255, 0.1); color: #fff;}
.text:focus {border-color: rgba(255, 255, 255, 0.5); -webkit-box-shadow: 0 0 5px rgba(255,255,255,.15); box-shadow: 0 0 5px rgba(255,255,255,.15);}
.dropdown-1 {width: 120px; padding: 4px 5px; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff;}
.dropdown-1 > option[value] {background-color: #236cb5;}
.button-1+label {display: inline-block; width: 100px; padding: 4px 5px; background-color: rgba(255,255,255,.125); border: solid 1px transparent; color: rgba(255,255,255,.85); font-size: 14px; font-weight: bold; text-align: center;}
.button-1+label:hover {background-color: rgba(255,255,255,.2);}
.button-1+label:active {position: relative; top: 1px;}
.button-1+label.search {border-color: #348fe2; background-color: #1c75c7; color: #fff; -webkit-transition: background-color .3s,color .3s; transition: background-color .3s,color .3s; cursor: pointer;}
.button-1+label.search:hover {background-color: #0a63b5;}
.button-save+label {background-color: rgba(230, 103, 29, .5); border: solid 1px #e6671d;}
.button-save+label:hover {background-color: #e6671d;}
.table-1 th, .table-1 td {padding: 4px 2px;}
.table-1 th {border-bottom: 1px solid #e4e7ea; box-sizing: border-box; font-size: 14px;}
.table-1 td {border-bottom: 1px solid rgba(255, 255, 255, 0.25); box-sizing: border-box; font-size: 14px; vertical-align: top;}
.table-1 > tbody > tr:nth-of-type(odd) {background-color: rgba(255, 255, 255, 0.08);}
.table-1 > tbody > tr:hover {background-color: rgba(255, 255, 255, 0.125);}

.modal {display: table; position: fixed; z-index: 98; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; -webkit-transition: opacity 0.15s linear 0s; transition: opacity 0.15s linear 0s;}
.modal-active {opacity: 1; pointer-events: auto;}
/*.modal .modal-dialog {position: relative; width: 400px; margin: 30px auto; opacity: 0; -webkit-transform: translateY(-25%); transform: translateY(-25%); -webkit-transition: -webkit-transform 0.3s ease-out 0s; transition: transform 0.3s ease-out 0s;}
.modal .modal-dialog-active {-webkit-transform: translateY(40px); opacity: 1; transform: translateY(40px);}*/
.modal .modal-dialog {display: table-cell; vertical-align: middle; pointer-events: none;}
.modal .modal-dialog .modal-content {max-width: 800px; margin: 0 auto; background-color: rgba(6, 56, 105, 0.9); border: thin solid #0683b3; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); color: #ced4da; pointer-events: auto;}
.modal .modal-dialog .modal-content .modal-header {position: relative; padding: 10px 15px 8px 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.11); color: #00dcff;}
.modal .modal-dialog .modal-content .modal-header .close {position: absolute; top: 13px; right: 15px; background: rgba(255, 255, 255, 0); border: none; color: #fff;}
.modal .modal-dialog .modal-content .modal-body {overflow: hidden; padding: 10px 15px; color: #fff; text-align: center;}
.modal .modal-dialog .modal-content .modal-action {border-top: 1px solid rgba(255, 255, 255, 0.11);}
.modal .modal-dialog .modal-content .modal-action .action-list {padding: 5px; box-sizing: border-box; text-align: center;}
.modal .modal-dialog .modal-content .modal-action .action-list > li {display: inline-block; padding: 0 5px; box-sizing: border-box;}
.modal .modal-dialog .modal-content .modal-action .action-list .button {min-width: 80px; padding: 5px; box-sizing: border-box; background-color: #ffffff; color: #414141;}
.modal .modal-dialog .modal-content .modal-action .action-list .button.yes {background-color: rgba(230, 103, 29, .5); border: solid 1px #e6671d; color: #ffffff;}
.modal .modal-dialog .modal-content .modal-action .action-list .button:hover {background-color: #e6671d; color: #ffffff;}
.modal .modal-dialog .modal-content .modal-action .action-list .button:active {position: relative; top: 1px;}

.action-bar {display: flex; padding: 5px 0; font-size: 14px;}
.action-bar .block-left {display: none;}
.action-bar .block-left .action-ctrl {position: relative;}
.action-bar .block-left .button-action {display: table-cell; height: 32px; padding: 2px 5px; background-color: rgba(255, 255, 255, 0.1); border: thin solid rgba(255, 255, 255, 0.1); text-align: center; vertical-align: middle; -webkit-transition: border-color 0.25s linear 0s; transition: border-color 0.25s linear 0s;}
.action-bar .block-left .button-action:hover {background-color: rgba(255, 255, 255, 0.2); border: thin solid rgba(255, 255, 255, 0.2);}
.action-bar .block-left .button-action > div {width: 4px; height: 4px; margin: 3px 0; background: #fff; -webkit-transition: background-color 0.25s linear 0s; transition: background-color 0.25s linear 0s;}
.action-bar .block-left .action-list {position: absolute; top: 0; left: 16px; margin-top: 35px; min-width: 120px; background-color: rgba(0, 0, 0, 0.96); visibility: hidden; opacity: 0; -webkit-box-shadow: 10px 15px 15px 0 rgb(5 5 5 / 60%); box-shadow: 5px 5px 15px 0 rgb(5 5 5 / 60%); -webkit-transition: all .2s ease; transition: all .2s ease;}
.action-bar .block-left .action-list.active {margin-top: 0; visibility: visible; opacity: 1;}
.action-bar .block-left .action-list .action-item {display: inline-block; width: 100%; padding: 8px;}
.action-bar .block-left .action-list .action-item:hover {background-color: rgba(255, 255, 255, 0.06);}
.action-bar .block-right {width: 100%; text-align: center;}

.pager ul {display: inline-block;text-align: center;}
.pager ul > li {display: inline-block;}
.pager .page-control {width: 32px; height: 32px; border-radius: 50%; line-height: 32px; background-color: rgba(255, 255, 255, 0.1); border: 0 solid #dee2e6; color: rgba(255, 255, 255, 0.85); text-align: center; -webkit-transition: background-color .3s,color .3s; transition: background-color .3s,color .3s; cursor: pointer;}
.pager .page-control:hover {background-color: #fff; color: #000000;}
.pager .page-control:active {position: relative; top: 1px;}
.pager .page-number {width: 40px; text-align: center;}

.block-header {height: 50px; background-color: rgba(0, 0, 0, 0.3);}
.block-header > div {position: relative; float: left;}
.block-header .h-left {display: none;}
.block-header .h-left h1 {margin-top: 8px; font-size: 26px; font-weight: normal;}
.block-header .h-right {width: 100%; text-align: center; line-height: 50px;}
.block-header .h-right .page-title {font-size: 20px;}

.block-menu {position: absolute; left: 0; z-index: 90; width: 250px; height: 100%; padding: 15px; background-color: rgba(0, 0, 0, 0.9); -webkit-transform: translateX(-250px); transform: translateX(-250px); -webkit-transition: -webkit-transform 300ms ease 0s; transition: transform 300ms ease 0s;}
.block-menu-toggled {-webkit-transform: translateX(-5px); transform: translateX(-5px);}
.block-menu .button-menu {position: absolute; top: -40px; right: -40px; padding: 2px 5px; border: thin solid #fff; -webkit-transition: border-color 0.25s linear 0s; transition: border-color 0.25s linear 0s;}
.block-menu .button-menu:hover {border-color: #90c2c4;}
.block-menu .button-menu > div {width: 20px; height: 4px; margin: 3px 0; background: #fff; -webkit-transition: background-color 0.25s linear 0s; transition: background-color 0.25s linear 0s;}
.block-menu .button-menu:hover > div {background: #90c2c4;}
.block-menu .block-identity {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.6em; background-color: rgba(255,255,255,.06);}
.block-menu .avatar {width: 40px; height: 40px; margin-right: 10px; border-radius: 50%;}
.block-menu .avatar img {width: 100%;}
.block-menu .menu-identity {width: auto; font-size: 14px;}
.block-menu .menu-identity > li {display: inline-block;}
.block-menu .block-nav {margin-top: 1em;}
.block-menu .nav-list a {display: block;}
.block-menu .nav-list > li > a {padding: 0.5em 1em;}
.block-menu .nav-list > li.active > a {background-color: rgba(255, 255, 255, 0.06);}
.block-menu .nav-sub-list > li {position: relative;}
.block-menu .nav-sub-list > li > a {padding: 0.3em 1em 0.3em 2em; color: rgba(255, 255, 255, 0.5);}
.block-menu .nav-sub-list > li > a:hover {color: rgba(255, 255, 255, 1);}
.block-menu .nav-sub-list > li.active > a {color: rgba(255, 255, 255, 1);}
.block-menu .nav-sub-list > li.active > a::before {position: absolute; top: 13px; left: 20px; width: 5px; height: 5px; border-radius: 50%; background-color: #fff; content: ''; -webkit-animation-name: bounce_circleG; animation-name: bounce_circleG; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}
.block-content {padding: 0 10px 30px;}

@-moz-keyframes bounce_circleG {
    0% {}
    50% {background-color: #3276B1;}
    100% {}
}
@-webkit-keyframes bounce_circleG {
    0% {}
    50% {background-color: #3276B1;}
    100%{}
}
@-ms-keyframes bounce_circleG {
    0% {}
    50% {background-color: #3276B1;}
    100% {}
}
@-o-keyframes bounce_circleG {
    0% {}
    50% {background-color: #3276B1;}
    100% {}
}
@keyframes bounce_circleG {
    0% {}
    50% {background-color:#3276B1;}
    100% {}
}

@media only screen and (min-width: 768px) {
    .action-bar > div {width: 50%;}
    .action-bar .block-left {display: block;}
    .action-bar .block-right {text-align: right;}

    .block-header .h-left {display: block; width: 50%; padding-left: 40px;}
    .block-header .h-left h1 {padding: 0 10px;}
    .block-header .h-right {width: 50%; padding: 0 10px; text-align: right;}
}

@media only screen and (min-width: 1360px) {
    .block-header .h-left {padding-left: 0;}
    .block-menu {position: absolute; top: 50px; height: calc(100% - 50px); -webkit-transform: translateX(-5px); transform: translateX(-5px); background-color: rgba(0, 0, 0, 0.1);}
    .block-menu .button-menu {display: none;}
    .block-content {padding: 0 30px 30px 280px;}
}