@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600');
@import url('components/grid.css');

button {
    -webkit-appearance: none;
    border: 1px #aaaaaa solid;
    background: none;
}

* {
    outline: none;
    font-family: 'Helvetica Neue', 'Work Sans', 'Helvetica', 'Arial', sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
    display: flex;
    flex-direction: column;
    color: #000000;
    font-family: 'Helvetica Neue', 'Work Sans', 'Helvetica', 'Arial', sans-serif;
    overflow: hidden;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

body {
    font-size: 1.6em;
    font-weight: 400;
    line-height: 1.6;
    position: relative;

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

textarea, input[type=text], input[type=password] {
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ios-status-bar {
    height: 20px;
    background-color: #1B1D20;
}

#app-action-bar, #app-status-bar {
    background-color: #1B1D20;
    border: 0 solid rgba(6,8,10,.65);
    color: #fff;
}

#app-action-bar {
    display: flex;
    border-bottom-width: 1px;
}

#app-action-bar .title {
    font-size: 1.8em;
    flex: 1 1 auto;
    align-self: center;
    text-align: center;
}

#app-action-bar .navigation {
    font-size: 1.2em;
    align-self: center;
    flex: 1 1 auto;
    text-align: right;
    margin-right: 15px;
    color: #FFF;
}

#app-action-bar .action {
    width: 50px;
    height: 50px;
    float: left;
    font-size: 1.5em;
    text-align: center;
    display: flex;
    flex-direction: column;
}

#app-action-bar .action button {
    border: none;
    width: 50px;
    height: 50px;
    text-align: center;
    padding: 0;
    flex: 0 0 auto;
}

#app-action-bar .action:last-child {
    width: 50px; height: 50px; float: left;
    /*border-right:none; border-left: 1px #d43f3a solid;*/
}

#app-status-bar {
    flex: 0 0 25px;
}

.navigation a, .navigation a:hover, .navigation a:active {
    color: #fff;
    margin-left: 15px;
    text-decoration: none;
}



main,[data-role="page-container"] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    position: relative;
    overflow: hidden !important;
}

[data-role="page"], .ui-page, .page {
    width: 100%;
    position: relative;
    flex: 1 1 auto;
    display: none;
}

[data-role="page-view"].active {
    display: block !important;
}

[data-role="page"].active, .visible {
    display: flex !important;
}

[data-role="page-content"] {
    width: 100%;
    overflow: hidden !important;
    overflow-y: auto;
}

[data-component="table-list"] {
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
}

[data-role="table-list-header"] div {
    font-weight: 600;
}

[data-component="modal"] {
    display: none;
    flex: 0 0 auto;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

[data-role="indicator"] {
    height: 100%;
    display: none;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgba(241, 241, 241, 0.95);
}

[data-role="page-view"] {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px;
    overflow-y: auto;
}

[data-role="page-container"], [data-role="page"], [data-role="page-view"] {
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background: #DBDBDB radial-gradient(ellipse at center, #f1f1f1 0%, #b9babc 100%);
}

[data-role="button-prev"] {
    background-color: #d43f3a;
}

[data-role="button-next"] {
    background-color: #719e40;
}

[data-role="button-admin"] {
    border-right:none; border-left: 1px #d43f3a solid !important;
}

.pane-toggle .icon-bar {
    background-color: #888;
}
.pane-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

.login, .logout {
    width: 100%;
    height: 300px;
    margin: 15px 0 0;
    font-size: 2em;
    cursor: pointer;
    color: #FFF;
    border: none !important;
}

tr {
    border-bottom: 5px solid #DBDBDB;
    padding: 10px;
}

td {
    background-color: #fff;
    padding: 10px;
}

th {
    text-align: right;;
}

[data-role="table-list-header"] {
    padding: 10px;
    background-color: #fff;
}

[data-role="table-list-header"] input {
    position: absolute;
    top: 2px;
    width: 200px;
    right: 0;
    border-width: 0;
    border-left-width: 1px;
}

[data-role="table-list-header"],
.table-list-item{
    display: table;
    width: 100%;
    table-layout: fixed;
    margin-bottom: 5px;
    position: relative;
}

.table-list-item {
    cursor: pointer;
}

.table-list-item .list-row {
    background-color: #fff;
    table-layout: fixed;
    display: table;
    width: 100%;
    padding: 10px;
}

[data-role="table-list-header"] div,
.table-list-item > div.list-row > div,
.table-list-item .column {
    display: table-cell;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 10px;
    text-align: left;
    font-weight: 600;
}

.table-list-item > div.list-row > div.status {
    text-overflow: unset!important;
}

.table-list-item > div.list-row > div {
    font-weight: normal;
}

.table-list-item[data-event="logout"] .status:before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background-color: #d43f3a;
    display: inline-block;
}

.table-list-item[data-event="login"] .status:before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background-color: #719e40;
    display: inline-block;
}


.vh-center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.login {
    background-color: #719e40;
    margin-right: 15px;
}

.logout {
    background-color: brown;
    margin-left: 15px;
}

.error {
    color: firebrick;
}



#contact-search {
    background-color: rgba(255,255,255, .95);
}

.search-result-item {
    padding: 10px;
    background-color: #fff;
    margin: 5px 0;
    cursor: pointer;
}
.select2-container {
    width: 100%;
}

#project-signature {
    position: absolute;/* top: 50px; */width: 100%;height: 100%;
}

#login-box {
    width: 350px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 25px;
    border: 1px rgba(204, 204, 204, 0.95) solid;
}

#login-box .login-title {
    font-weight: 300;
    font-size: 1.8em;
    margin: 0 0 15px 0;
    text-transform: uppercase;
}

#login-box .login-img {
    border: 6px solid #03A9F4;
    margin: auto auto 25px;
    width: 142px;
    height: 142px;
}

#login-box input {
    text-align: center;
}

#login-box.error .login-img {
    border: 6px solid #d43f3a;
    -webkit-transition: border-color 1s, fill 1s; /* Safari */
    transition: border-color 1s, fill 1s;

}

#login-box.error .login-img #ion-user-icon .user-background {
    fill: #d43f3a;
    -webkit-transition: border-color 1s, fill 1s; /* Safari */
    transition: border-color 1s, fill 1s;
}

.btn-success {
    background-color: #719e40;
    border: 1px solid #719e40;
    color: #fff;
}

.btn-warning {
    background-color: #FF9800;
    border: 1px solid #FF9800;
    color: #fff;
}

.btn-danger {
    background-color: #d43f3a;
    border-color: #d43f3a;
    color: #fff;
}

.btn-primary {
    background-color: #0089FF;
    border-color: #0089FF;
    color: #fff;
}

.week.disabled {
    background-color: rgba(255,255,255, .7);
}

.week.disabled {
    /*background-image: linear-gradient(45deg, #d0d0d0 25%, transparent 25%, transparent 50%, #d0d0d0 50%, #d0d0d0 75%, transparent 75%, transparent);
    background-size: 24px 24px;*/
    background-color: rgba(255,255,255,0.5);
    color: rgba(6, 6, 6, 0.8);
    cursor: not-allowed;
}

.week {
    width: calc(12.5% - 1px);
    /*height: 125px;*/
    float: left;
    box-sizing: border-box;
    background-color: white;
    overflow: hidden;
    margin: 0.5px;
    padding: 15px;
    cursor: pointer;
}

.week.current {
    background-color: #d43f3a;
    color: #fff;
}

.btn {
    height: 41px;
    padding: 6px 12px;
    font-size: 1em;
    line-height: 1.42857143;
}

.alert-danger {
    background-color: #d43f3a;
    border-color: #d43f3a;
    color: #fff;
    padding: 10px;
}

#splash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #B9BABC;
    background-image: url('/resources/ios/startup/ipad-pro-landscape.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 10000;
}

.widget-container {
    margin: 15px;
    width: 50%;
    height: 790px;
}

.widget {
    display: flex;
    background-color: rgba(255,255,255,.9);
    height: 100%;
    flex-direction: column;
}

#install-popup {
    position: absolute;
    top: 15px;
    right: 115px;
}

#install-popup .popup-content {
    position: relative;
    text-transform: uppercase;
    background-color: #fff;
    padding: 25px
}

#install-popup .popup-content:before {
    content: '';
    position: absolute;
    right: 15px;
    top: -15px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;

    border-bottom: 15px solid #fff;
}

#install {
    background-image: url('/resources/ios/startup/ipad-pro-landscape.png');
    background-size: contain;
}

#install main, #install [data-role="page-container"] {
    background-color: transparent;
}

.theme-stripes {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxMjMgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyMyAyMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHJlY3QgeD0iLTAuNSIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjEyNCIgaGVpZ2h0PSIyMCIvPjxwb2x5Z29uIGZpbGw9IiNDNjA3MDgiIHBvaW50cz0iNjEuMywyMCAwLDIwIDM0LjcsMCA5NiwwICIvPjwvc3ZnPg==);
    height: 20px;
    display: block;
    border-bottom: 1px #000 solid;
}

/* ALERT */
#popup_container {
    min-width: 300px; /* Dialog will be no smaller than this */
    max-width: 600px; /* Dialog will wrap after this width */
    background: #FFF;
    border: solid 6px rgba(0,0,0,.8);
    color: #000;
}

#popup_title {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    line-height: 1.75em;
    color: #666;
    background-color: #CCC;
    border-bottom: solid 1px #999;
    cursor: default;
    padding: 0;
    margin: 0;
}

#popup_content {
    /*background: 16px 16px no-repeat url(/resources/img/info.gif);*/
    padding: 1em 1.75em;
    margin: 0;
}

#popup_content.alert {
    /*background-image: url(/resources/img/info.gif);*/
}

#popup_content.confirm {
    background-image: url(/resources/img/important.gif);
}

#popup_content.prompt {
    background-image: url(/resources/img/help.gif);
}

#popup_message {
    /*padding-left: 48px;*/
    text-align: center;
}

#popup_panel {
    text-align: center;
    margin: 1em 0 0 1em;
}

#popup_prompt {
    margin: .5em 0;
}

#contact-list .widget-content {
	overflow: hidden;
	overflow-y: scroll;
}