﻿/* *** Tags *** */

a {
    cursor: pointer;
    cursor: hand;
}

.disable {
    cursor: not-allowed;
    pointer-events: none;
    color: #D4D4D4 !important; 
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.has-help {
    cursor: help;
}

/* *** Layout *** */
body {
    background-image: url('../images/cover-background.jpg');
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.app-wrapper {
    background-color: transparent;
}

.navbar-controls > li.control-locale > a {
    font-size: 16px;
    border: 2px solid white;
    padding: 10px;
}

@media (min-width: 768px) {
    .navbar-controls > li.control-locale > a {
        min-width: 50px;
        text-align: center;
    }
}

.navbar-controls > li.control-locale > a:active,
.navbar-controls > li.control-locale > a:hover,
.navbar-controls > li.control-locale > a:focus,
.navbar-controls > li.control-locale.active > a {
    background-color: #F4F4F4;
    outline: none;
}

.headline {
    color: white;
}

.headline h1 {
    font-size: 50px;
    text-align: center;
}

@media (max-width: 991px) {
    .headline h1 {
        font-size: 36px;
    }
}

/* Sections */
.section.alert {
    background-color: rgba(255,255,255, 0.9);
}

.section.alert:before {
    color: #666666;
    background-color: transparent;
}

@media (min-width: 768px) {
    .section.alert {
        border-radius: 6px;
    }

    .section.alert:before {
        color: #666666;
        background-color: transparent;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }
}

.section-stats:before {
    content: "\f080";
}

.section-info:before {
    content: "\f129";
}

.section-title {
    font-size: 20px;
    font-weight: 200;
    line-height: 1em;
    margin: 0;
}

.section-title > a {
    color: #333333;
}

.section .section-title > a {
    display: block;
}

.section-title > a:hover {
    color: #171717;
    text-decoration: none;
}

.section-content {
    margin-top: 15px;
}

/* UI Components */

.activable {
    padding-left: 40px;
}

.activable .strate-icon {
    position: absolute;
    left: 5px;
    font-size: 20px;
}

/* Strates */
.strate-group {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.strate-content {
    background-color: white;
    margin: 0;
}

.strate-item.strate-title {
    background-color: white;
    background-color: rgba(255,255,255, 0.9);
}

.strate-heading .reveal-control + .help-block {
    margin-top: 10px;
    margin-bottom: -10px;
}

.input-group.reveal-control {
    left: 15px;
    padding-right: 5px;
}

@media (min-width: 768px) {
    .input-group.reveal-control {
        left: 0;
        padding-right: 0;
    }
}


.strate-inverse .strate-item > a {
    color: #D4D4D4;
}

.strate-inverse .strate-item > a:active,
.strate-inverse .strate-item > a:hover,
.strate-inverse .strate-item > a:focus {
    color: currentColor;
}

/* List groups */
.list-group .level-1 {
    cursor: default;
    pointer-events: none;
    background-color: #D4D4D4;
    font-weight: bold;
}

.list-group .level-2.activable {
    padding-left: 30px;
}

.list-group .level-3.activable {
    padding-left: 60px;
}

.list-group .level-3.activable .strate-icon {
    left: 30px;
    top: 18px;
}

/* Salary Component */

.salary-component {
    margin-left: 0;
    margin-right: 0;
    background-color: #64a0d7;
    opacity: 0.3;
}

.salary-component.valid {
    opacity: 1;
}

.salary-component > div {
    position: relative !important;
    overflow: hidden;
    color: white;
    line-height: 10px;
    min-height: 180px;
    padding: 15px 15px 40px 15px; 
    text-align: right;
}

.salary-component > div.median {
    border-left: 2px solid white;
    border-right: 2px solid white;
    background-color: #3366cc;
}

.salary-component .lead {
    position: absolute;
    min-height: 35px;
    bottom: 0;
    right: 15px;
    left: 15px;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) and (max-width: 1280px) {
    .offcanvas.in .salary-component > div {
        padding-left: 5px;
        padding-right: 5px; 
    }

    .offcanvas.in .salary-component .lead {
        right: 5px;
        left: 5px;
    }
}

.salary-disclaimer {
    padding: 5px 15px;
    background-color: white;
    background-color: rgba(255,255,255, 0.9);
}

.salary-disclaimer,
.salary-disclaimer p,
.salary-disclaimer ul li {
    font-size: 12px;
    line-height: 16px;
    margin: 0;
}

.salary-disclaimer ul {
    padding-left: 15px;
}

.salary-disclaimer ul li:before {  
    content: " - ";
    margin-left: -12px;
    position: absolute;
}

.salary-table {
    padding: 5px 10px;
    background-color: #f5f5f5;
}

.salary-table table {
    margin-bottom: 5px;
}

.salary-table th,
.salary-table td {
    text-align: center;
}

.salary-table tbody>tr {
    background-color: #FFFFFF;
}

#content {
    top: 60px;
    padding-top: 0;
    padding-bottom: 15px;
}

@media (min-width: 768px) {
    #content {
        top: 90px;
        padding-top: 0;
        padding-bottom: 15px;
    }
}

.strate-viewport {
    width: 100%;
}

/* IE 9 fix */
.offcanvas-main {
    box-sizing: content-box;
}

.offcanvas-sidebar .strate-title {
    font-size: 26px;
    font-weight: 200;
}

body.start .help-switch {
    display: none;
}

.strate-heading .col-xs-12.col-sm-5 {
    padding-right: 0;
}

.strate-heading .col-sm-7 {
    padding-left: 0;
}

.strate-heading label:not(.inline) {
    display: block;
    cursor: pointer;
}

.strate-item.static .strate-heading {
    color: #333;
    background-color: #C9DEF1;
}

.strate-item.static .strate-heading label {
    cursor: default;
}

.strate-group.monthly-salary {
    display: none;
}

.strate-group.nationality-salary .fa-print {
    margin-right: 10px;
}

.strate-notification {
    margin-top: 15px;
}

@media (max-width: 767px) {
    .selection-right-text {
        margin-left: 15px;
        margin-top: 10px;
        display: inline-block;
        font-weight: 400;
    }

    .top-space-sm {
        margin-top: 15px !important;
    }
}

.has-reveal .help-block {
    margin-left: 20px;
}

.strates-layout .brand-header {
    margin-right: 0;
    padding-right: 0;
    padding-left: 0;
    margin-left: 0;
}

.strate-heading.row {
    margin-right: 0;
}

@media (max-width: 767px) {
    .row.row-sm-gutterless {
        margin-left:0;
        margin-right:0;
    }

    .row.row-sm-gutterless > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }
}

.inversed a:not(.strate-icon) {
    color: #7CA7FF;
}

.inversed a:hover:not(.strate-icon) {
    color: #5D93FF;
}

.nationality-salary.strate-group {
    border: 0;
}

.nationality-salary .strate-item {
    border: 0;
}

.nationality-salary .strate-panel:before,
.nationality-salary .strate-panel:after {
    box-shadow: none;
    -webkit-box-shadow: none;
}

.nationality-salary .table>tbody>tr>td {
    border-top: 3px solid #F5F5F5;
}

.horizontal-container {
    display: table;
}

.horizontal-element {
    display: table-cell;
    vertical-align: middle;
}

.horizontal-element-title {
    display: table-cell;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.nationality-salary .strate-heading {
    padding: 10px 15px;
}

.collapse-animation {
    overflow: hidden;
}

.collapse-animation.ng-enter,
.collapse-animation.ng-leave {
    -webkit-transition: 0.35s ease all;
    -moz-transition: 0.35s ease all;
    -ms-transition: 0.35s ease all;
    -o-transition: 0.35s ease all;
    transition: 0.35s ease all;
}

.collapse-animation.ng-enter {
    max-height: 0;
}

.collapse-animation.ng-enter.ng-enter-active {
    max-height: 1000px;
}

.collapse-animation.ng-leave {
    max-height: 1000px;
}

.collapse-animation.ng-leave.ng-leave-active {
    max-height: 0;
}

#liProfession .small {
    font-weight: 400;
}

.with-top-margin {
    margin-top: 15px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance:textfield;
}