html, body {
    font-family: 'Titillium Web', sans-serif;
    background-color: #135f8d;
    color: #000000;
}

/* DOCUMENT HEADER */
#header{
    max-height: 150px;
    text-align: center;
    background-color: #35596f;
    border-bottom: 2px solid #35596f;
}
#header img {
    max-width: 100%;
    max-height: 148px;
    margin: auto;
}


/* add transition to container, so that every change between grid systems (xs, sm, md, lg) is animated */
.container {
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

/* decrease distance between page header and top of the page */
.page-header {margin-top: 20px;}

/* make form control bigger */
.form-control-big {
    height: 50px;
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 5px;
    font-size: 18px;
    line-height: 26px;
}

.display-none {display: none;}

.height-200 {height: 200px;}
.height-400 {height: 400px;}

textarea.form-control.height-200 {height: 200px;}
textarea.form-control.height-400 {height: 400px;}

/*  */
.vertical-align-top {vertical-align: top !important;}

/* space between buttons when they are positioned vertically */
.btn {
    margin-top: 2px;
    margin-bottom: 2px;
}

/* width */
.width-20 {width: 20px;}
.width-20 {width: 20px;}

/* margin */
.margin-left-5 {margin-left: 5px;}
.margin-left-10 {margin-left: 10px;}
.margin-left-20 {margin-left: 20px;}
.margin-right-5 {margin-right: 5px;}
.margin-right-10 {margin-right: 10px;}
.margin-right-20 {margin-right: 20px;}
.margin-top-5 {margin-top: 5px;}
.margin-top-7 {margin-top: 7px;}
.margin-top-10 {margin-top: 10px;}
.margin-top-20 {margin-top: 20px;}
.margin-top-30 {margin-top: 30px;}
.margin-bottom-10 {margin-bottom: 10px;}
.margin-bottom-20 {margin-bottom: 20px;}
.margin-bottom-30 {margin-bottom: 30px;}

/* padding */
.padding-20 {padding: 20px;}
.padding-top-5 {padding-top: 5px;}
.padding-top-10 {padding-top: 10px;}
.padding-top-15 {padding-top: 15px;}
.padding-top-20 {padding-top: 20px;}
.padding-bottom-5 {padding-bottom: 5px;}
.padding-bottom-10 {padding-bottom: 10px;}
.padding-bottom-15 {padding-bottom: 15px;}
.padding-bottom-20 {padding-bottom: 20px;}
.padding-left-15 {padding-left: 15px;}
.padding-right-15 {padding-right: 15px;}

/* position */
.position-relative {position: relative;}
.position-absolute {position: absolute;}
.position-fixed {position: fixed;}

/* float */
.float-left {float: left;}
.float-right {float: right;}
.clear-both {clear: both;}

/* Font styles */
.font-08em {font-size: 0.8em;}
.font-12em {font-size: 1.2em;}
.font-14em {font-size: 1.4em;}
.bold {font-weight: bold;}
.underline {text-decoration: underline;}
.italic {font-style: italic;}
.center {text-align: center;}
.right {text-align: right;}
.color-red {color: #eb1611;}
.color-orange {color: #eb4911;}
.color-green {color: #4c9738;}
.color-black {color: #000000;}
.color-blue {color: #004f7e;}
.color-light-gray {color: #bbbbbb;}

/* Background Colors */
.bg-color-red {background-color: #f57376;}
.bg-color-light-gray-1 {background-color: #fcfcfc;}
.bg-color-light-gray-2 {background-color: #f0f0f0;}

/* Border Colors */
.border-color-red {border-color: #ff0000;}

/* cursor */
.cursor-pointer {cursor: pointer;}




/* tooltips */
.project-create-tooltip {
    position: absolute;
    right: 40px;
    margin-top: -30px;
    width: 20px;
    height: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    background-color: #444;
    border-radius: 50%;
}


/* upload zone, drag and drop area */
.upload-drop-zone {
    width: 100%;
    min-height: 100px;
    border: dashed 2px #aaa;
    border-radius: 20px;
    background-color: #fdfdfd;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    color: #888;
    margin-top: 10px;
}
.upload-drop-zone > i {
    font-size: 50px;
    color: #aaa;
}
.upload-drop-zone.hover {
    color: #444;
    background-color: #f0f0f0;
}
.upload-drop-zone.hover > i {
    color: #888;
}




/* editable table */
.editable-table-cell {position: relative;}
.editable-table-cell-input {position: absolute;
    width: 98%;
    top: 1%;
    height: 98%;
    border: 0;
    padding: 8px;
    left: 0%;
}




/* refresh icon */
.refresh-icon {
    color: #e0e0e0;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}
.refresh-icon:hover {color: #888888;}
.refresh-icon-small {
    color: #e0e0e0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.refresh-icon-small:hover {color: #888888;}




/* loading animation */
.loading-animation-status {
    position: absolute;
    top: 0px;
    width: 100%;
    line-height: 66px;
    text-align: center;
}




/* language button */
.language-button {
    width: 40px;
    margin-right: 5px;
    filter: alpha(opacity = 50);
    -ms-filter: "alpha(opacity = 50)";
    opacity: .50;
    cursor: pointer;
}
.language-button:hover, .language-button.active {
    filter: alpha(opacity = 100);
    -ms-filter: "alpha(opacity = 100)";
    opacity: 1; 
}




/* breadcrumb navigation */
.breadcrumb {
    background-color: rgba(255,255,255,0.1);
    font-size: 0.85em;
}
@media (min-width: 768px) {
    .breadcrumb{padding-left: 30px;}
}