#splash-screen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: rgba(30,30,30,0.9);
    height: 100vh;
}

#splash-screen {
    max-width: 800px;
    width: 100%;
    margin: 0 auto; 
    background: url(/zoneworksxt/style/theme/default/splash_cover.png);
    background-repeat: no-repeat;
    background-size: cover;
}

#splash-screen .splash-header {
    padding: 5px;
    background-color: black;
    background-image: url('/zoneworksxt/style/theme/default/dialog_head.png');
    background-position: left;
    background-repeat: no-repeat;
}

#splash-screen .splash-logo {
    width: 100%;
    margin: 3px 0px 10px -5px;
}

#splash-screen h1 {
    font-weight: bold;
}

#splash-screen .splash-header h1 {
    display: inline-block;
    margin: 0;
}

#splashUserName {
    padding: 10px;
}

#splashUserName > span {
    word-break: break-word;
    margin-right: 10px;
}

#splashLogoutForm {    
    cursor: pointer;
}

#splash-screen .content {
    padding: 20px 15px;
}

#splash-screen a {
    color: white;
    text-decoration: none;
}
#splash-screen a:hover {    
    text-decoration: underline;
}

#splash-screen input[type=text],
#splash-screen select {
    color: black;
}

.splash-button {
    background: transparent;
    color: white;
    padding: 5px 10px;
    margin: 0px 15px 20px 15px;
    width: 300px;
    border: none;    
    text-align: left;
    font-size: 18px;
}

.splash-button img {
    width: 55px;
    height: 55px;
}


.splash-button:hover,
.splash-button:active {
    background: #221F1F80;
}

#splash-screen .splash-message {
    padding-left: 40px;
    padding-right: 20px;
    color: white;
}

#splash-screen .splash-message p {
    margin-top: 40px;
    padding-bottom: 30px;
}

#account-management > form {
    min-height: 300px;
}


#manage-user-roles {
    font-size: 0.85em;
    margin-bottom: 15px;
    display: block;
    min-height: 300px;
    max-height: 300px;
    overflow-y: scroll;
}


#manage-user-roles thead, #manage-user-roles tbody {
    display: block;
}

#manage-user-roles tbody {
    overflow-x: hidden;
    overflow-y: auto;
    height: 155px;
}

#manage-user-roles th {
    height: 85px;
    white-space: nowrap;
}

#manage-user-roles th > div {
    transform: translate(12px, 22px) rotate(315deg);
    width: 34px;
}

#manage-user-roles th > div > span {
    border-bottom: 1px solid white;
    padding: 5px 10px;
}

#manage-user-roles tr {
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

#manage-user-roles thead tr {
    border: none;
}


#manage-user-roles td {
    width: 15px;
    border-left: 1px solid white;
    border-right: 1px solid white;
    padding: 2px;
}

#manage-user-roles tr td:first-child {
    border-left: none;
    text-align: right;
    padding-right: 5px;
    max-width: 100px;
    min-width: 100px;
    overflow: hidden;
}

#manage-user-roles.eng-user-table td:first-child {
    max-width: 77px;
    min-width: 77px;
}

#manage-user-roles tr th:first-child {
    max-width: 108px;
    min-width: 108px;
}

#manage-user-roles.eng-user-table tr th:first-child {
    max-width: 85px;
    min-width: 85px;
}

#manage-user-roles input[type=checkbox] {
    margin: 3px 9px;
}

#splash-screen .text-danger {
    background-color: white;
}


.splash-options-wrapper {
    text-align: center;
}

#splash-screen .splash-header {
    color: #fff;
}

#splash-screen .splash-header input {
    font-size: 24px;
    color: black;
    font-weight: 700;
    height: 30px;
    outline: none;
}


#splash-screen .splash-header .edit-button {    
    font-size: 20px;
    cursor: pointer;    
    vertical-align: top;    
}

#directory-group-roles, #directory-user-roles {
    font-size: 0.85em;
    margin-bottom: 15px;
    display: block;
    min-height: 240px;    
    max-height: 240px;
    overflow-y: scroll;
}

#directory-group-roles.eng-user-table， #directory-user-roles。eng-user-table {
    width: 356px;
}

#directory-group-roles thead, #directory-group-roles tbody, #directory-user-roles thead, #directory-user-roles tbody {
    display: block;
}

#directory-group-roles tbody, #directory-user-roles tbody {
    overflow-x: hidden;
    overflow-y: auto;
    height: 155px;
}

#directory-group-roles th, #directory-user-roles th {
    height: 85px;
    white-space: nowrap;
}

#directory-group-roles th > div, #directory-user-roles th > div{
    transform: translate(12px, 22px) rotate(315deg);
    width: 34px;
}

#directory-group-roles th > div > span, #directory-user-roles th > div > span {
    border-bottom: 1px solid white;
    padding: 5px 10px;
}

#directory-group-roles tr, #directory-user-roles tr {
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

#directory-group-roles thead tr, #directory-user-roles thead tr {
    border: none;
}

#directory-group-roles td, #directory-user-roles td {
    width: 15px;
    border-left: 1px solid white;
    border-right: 1px solid white;
    padding: 2px;
}

#directory-group-roles tr td:first-child, #directory-user-roles tr td:first-child {
    border-left: none;
    text-align: right;
    padding-right: 5px;
    max-width: 180px;
    min-width: 180px;
    overflow: hidden;
}

#directory-group-roles.eng-user-table td:first-child, #directory-user-roles.eng-user-table td:first-child {
    max-width: 77px;
    min-width: 77px;
}

#directory-group-roles tr th:first-child, #directory-user-roles tr th:first-child {
    max-width: 188px;
    min-width: 188px;
}

#directory-group-roles.eng-user-table tr th:first-child, #directory-user-roles.eng-user-table tr th:first-child {
    max-width: 85px;
    min-width: 85px;
}

#directory-group-roles input[type=checkbox], #directory-user-roles input[type=checkbox] {
    margin: 3px 9px;
}

#ul-access-groups,
#ul-access-group-assigned,
#ul-access-group-options {
    list-style: none;
    padding-left: 10px;
    min-height: 240px;
    max-height: 240px;
    overflow-y: scroll;
    padding-right: 5px;
    margin-bottom: 20px;
    margin-top: 10px;
}

#ul-access-groups li,
#ul-access-group-assigned li,
#ul-access-group-options li{
    margin-bottom:5px
}

#ul-access-groups a,
#ul-access-group-assigned a,
#ul-access-group-options a {
    cursor: pointer
}

#login-form {
    margin-top: 120px;
}

.help_qr {
    width: 256px;
    height: 256px;
}