/*------------------------------------*\
    #MAIN STYLING
\*------------------------------------*/

body {
    color : #363636;
}

h1 {
    color       : #363636;
    font-weight : 200;
}

/*------------------------------------*\
    #GLOBALS
\*------------------------------------*/
.grey {
    background : #f1f1f1;
}

.orange {
    background : #4690ec;
}

.btn {
    border-radius : 0;
    border        : 0;
}

/*------------------------------------*\
    #HEADER
\*------------------------------------*/

.navbar {
    position      : relative;
    min-height    : 50px;
    margin-bottom : 0;
    border        : none;
    border-radius : 0;
}

.navbar-default {
    background : #4690ec;
    border     : none;
    height     : 100px;
}

.navbar-default .navbar-brand {
    color : #fff;
}

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color            : #fff;
    background-color : transparent;
}

.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
    margin-left : 0;
    margin-top  : -15px;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color            : #fff;
    background-color : transparent;
    height           : 100px;
    line-height      : 75px;
}

/*------------------------------------*\
    #NAVIGATION
\*------------------------------------*/

.navigation {
    width      : 100%;
    background : #f1f1f1;
    height     : 50px;
}

.navigation ul.nav.navbar-nav li {

}

.navigation ul.nav.navbar-nav li.active {
    background : #d5d5d5;
}

.navigation ul.nav.navbar-nav li a:hover {
    background : #d5d5d5;
}

.navigation ul.nav.navbar-nav li a {
    color   : #363636;
    padding : 15px 50px;
}

.icon-mydata {
    background-image : url(/img/icons/icon-folder.png);
    display          : block;
    width            : 32px;
    height           : 32px;
    float            : left;
    margin-top       : -6px;
    margin-right     : 8px;
}

.icon-dataupload {
    background-image : url(/img/icons/icon-cloud.png);
    display          : block;
    width            : 32px;
    height           : 32px;
    float            : left;
    margin-top       : -6px;
    margin-right     : 8px;
}

/*------------------------------------*\
    #DROPZONE
\*------------------------------------*/
.dropzone {
    border        : 1px solid #e7e7e7;;
    background    : #f8f8f8;
    min-height    : 300px;
    margin-bottom : 20px;
}

.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message * {
    font-size   : 1.5em;
    line-height : 250px;
    margin      : 0;
}

/*------------------------------------*\
    #LOGIN
\*------------------------------------*/

h1.login {
    margin-top    : 75px;
    margin-bottom : 20px;
}

.panel {
    margin           : 10px 0;
    background-color : #fff;
    border-radius    : 4px;
    box-shadow       : none;
    border           : none;
}

.panel-heading {
    padding                 : 10px 15px;
    border-bottom           : 1px solid transparent;
    border-top-right-radius : 0;
    border-top-left-radius  : 0;
    border                  : none;
}

.panel-heading.login-panel-heading {
    background-color : #4690ec;
    border           : none;
    font-size        : 18px;
    font-weight      : 300;
    height           : 55px;
    line-height      : 38px;
}

.panel-default > .panel-heading {
    background-color : #4690ec;
    color            : #fff;
}

.panel-body.login-panel {
    background-color : #f1f1f1;
}

.control-label.login-form-label {
    padding-top : 10px;
}

.form-control.loginform {
    display          : block;
    width            : 100%;
    height           : auto;
    padding          : 12px 24px;
    font-size        : 14px;
    line-height      : 1.42857143;
    color            : #383838;
    background-color : #fff;
    background-image : none;
    border-radius    : 0;
    box-shadow       : none;
    transition       : none;
    border           : none;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color : #fff !important;
    background-image : none;
    color            : rgb(0, 0, 0);
}

.btn.btn-primary.form-login-button {
    display             : inline-block;
    margin-bottom       : 0;
    font-weight         : 300;
    text-align          : center;
    vertical-align      : middle;
    -ms-touch-action    : manipulation;
    touch-action        : manipulation;
    cursor              : pointer;
    background-image    : none;
    border              : none;
    white-space         : nowrap;
    padding             : 12px 32px 12px 48px;
    font-size           : 14px;
    border-radius       : 0;
    -webkit-user-select : none;
    -moz-user-select    : none;
    -ms-user-select     : none;
    user-select         : none;
    color               : #fff;
    background-color    : #4690ec;
    background-image    : url(/img/icons/icon-lock.png);
    background-position : 14px 8px;
    background-repeat   : no-repeat;
    line-height         : 22px;
    float               : right;
}

.checkbox.form-login-checkbox {
    margin : 7px 20px 0 0;
    float  : right;
}

/*------------------------------------*\
    #CONTENT
\*------------------------------------*/

h1.content-h1 {
    margin-top    : 75px;
    margin-bottom : 20px;
}

.myfiles-download-item {

}

.myfiles-title-col {
    color            : #fff;
    background-color : #4690ec;

    /* Break long filenames */
    overflow-wrap    : break-word;
    word-wrap        : break-word;

    -ms-word-break   : break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break       : break-all;

}

.myfiles-title-col h3 {
    line-height : 25px;
}

.myfiles-content-col {
    color            : #383838;
    background-color : #f1f1f1;
}

.time-info {
    color : #4690ec;
}

.myfiles-downloadlink {
    display          : block;
    width            : 100%;
    height           : 34px;
    padding          : 12px 24px;
    font-size        : 14px;
    line-height      : 1.42857143;
    color            : #555;
    background-color : #fff;
    background-image : none;
    border           : none;
    box-shadow       : none;
    transition       : none;
    outline          : none;
}

.myfiles-downloadlink:focus {
    border-color : transparent;
    outline      : 0;
    box-shadow   : none;
}

.myfiles-btn-download {
    color            : #fff;
    background-color : #4690ec;
    border           : none;
    border-radius    : 0;
}

.myfiles-btn-download:hover {
    color            : #fff;
    background-color : #217cef;
    border           : none;
    border-radius    : 0;
}

/*------------------------------------*\
    #USERS
\*------------------------------------*/
.nav a {
    color : #363636;
}

.nav-pills > li > a {
    border-radius : 0;
}

.nav-stacked > li + li {
    margin-top : 0;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
.nav > li > a:hover,
.nav > li > a:focus {
    color            : #363636;
    background-color : #d5d5d5;
}

table.users th {
    text-align : center;
}

form.delete-form {
    display : inline-block;
}

/*------------------------------------*\
    #DROPZONE
\*------------------------------------*/

.dropzone .dz-preview.dz-file-preview .dz-image {
    border-radius : 0;
    background    : #4690ec;
}

.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
    background-color : #4690ec;
    padding          : 12px 24px;
    border-radius    : 0;
    color            : #fff;
}

.dropzone .dz-preview .dz-details .dz-filename:hover span {
    border           : 1px solid #4690ec;
    background-color : #4690ec;
    border-radius    : 0;
    color            : #fff;
    display          : inline-block;
    padding          : 12px 24px;
}

.dropzone .dz-preview .dz-progress {
    opacity           : 1;
    z-index           : 100;
    pointer-events    : none;
    position          : absolute;
    left              : 0;
    top               : 0;
    width             : 100%;
    height            : 120px;
    margin-top        : 0;
    margin-left       : 0;
    background        : none;
    -webkit-transform : scale(1);
    border-radius     : 0;
    overflow          : hidden;
}

.dropzone .dz-preview .dz-progress-bar {
    opacity           : 1;
    z-index           : 100;
    pointer-events    : none;
    position          : absolute;
    left              : 0;
    top               : 0;
    width             : 100%;
    height            : 120px;
    margin-top        : 0;
    margin-left       : 0;
    background        : rgba(255, 255, 255, 0.9);
    -webkit-transform : scale(1);
    border-radius     : 0;
    overflow          : hidden;
    text-align        : center;
    line-height       : 120px;
    font-size         : 18px;
}

.dropzone .dz-preview .dz-remove {
    font-size  : 14px;
    text-align : center;
    display    : block;
    cursor     : pointer;
    border     : none;
    color      : #d9534f;
}

.dropzone .dz-preview {
    position       : relative;
    display        : inline-block;
    vertical-align : top;
    margin         : 0 0 20px 0;
    min-height     : 100px;
    width          : 100%;
}

.dropzone .dz-preview.dz-file-preview .dz-image {
    border-radius : 0;
    background    : #4690ec;
    width         : 100%;
}

.dropzone .dz-preview .dz-image {
    border-radius : 0;
    overflow      : hidden;
    width         : 100%;
    height        : 120px;
    position      : relative;
    display       : block;
    z-index       : 10;
}

.dropzone .dz-preview.dz-image-preview {
    background : none;
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
    border  : 1px solid transparent;
    padding : 12px 24px;
    display : inline-block;
    width   : auto;
}

.dropzone .dz-preview .dz-details .dz-size {
    margin-bottom : 0;
    margin-top    : 11px;
    font-size     : 16px;
}

.dropzone .dz-preview .dz-image img {
    width : 100%;
}

.dropzone .dz-preview .dz-details {
    z-index     : 200;
    position    : absolute;
    top         : 0;
    left        : 0;
    opacity     : 0;
    font-size   : 13px;
    min-width   : 100%;
    max-width   : 100%;
    padding     : 20px 1em;
    text-align  : center;
    color       : rgba(0, 0, 0, 0.9);
    line-height : 100%;
}