@import url(https://fonts.googleapis.com/css?family=IBM+Plex+Sans);
@import url(https://fonts.googleapis.com/css?family=IBM+Plex+Mono);

body {
    font-family: "IBM Plex Sans", sans-serif;
    background-color: #ffffff;
}

/* This is a class generated by the CKeditor */
.marker {
    background-color: #ffff66;
}

/* The filter buttons. */
.btn-info {
    margin: 0 0 100px 0;
    color: #C5C5C5 !important;
    background-color: #f2f2f2 !important;
    border-color: #cccccc !important;
}

.btn-info:hover {
    color: #ffffff !important;
    background-color: #dddddd !important;
    border-color: #cccccc !important;
}

.btn-info:active,
.btn-info.active,
.open>.btn-info.dropdown-toggle {
    color: #000000 !important;
    background-color: #e2e2e2 !important;
    border-color: #cccccc !important;
}

/* The title section */
h1 {
    font-size: 1.8em;
}

@media (min-width: 993px) {
    h2 {
        font-size: 1.4rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    h4 {
        font-size: 1rem;
    }
}

@media (max-width: 620px) {
    h1 {
        font-size: 1.5em;
    }
}

@media (max-width: 380px) {
    h1 {
        font-size: 1.3em;
    }
}

/* The cards with the coutry names */
.country-card {
    color: #000000;
    background-color: #ffffff;
    margin: 2px;
    font-family: "IBM Plex Mono", monospace;
    font-weight: bold;
    text-align: center;
    height: 7em;
    width: 13em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

@media (max-width: 768px) {
    .country-card {
        width: 10em;
        height: 5em;
        padding: 5px;
    }

    .country-card .card-body {
        font-size: 0.9em;
    }
}

@media (max-width: 576px) {
    .country-card {
        width: 7em;
        height: 5em;
        padding: 5px;
    }

    .country-card .card-body {
        font-size: 0.9em;
    }
}

@media (max-width: 380px) {
    .country-card {
        width: 6.2em;
    }

    .country-card .card-body {
        font-size: 0.8em;
    }
}

.country-card.highlight-3-country,
.legend-icon-3 {
    color: #ffffff;
    background-color: #333333;
    font-weight: bolder;
}

.country-card.highlight-2-country,
.legend-icon-2 {
    color: #ffffff;
    background-color: #888888;
    font-weight: bolder;
}

.country-card.highlight-1-country,
.legend-icon-1 {
    color: #000000;
    background-color: #dddddd;
    font-weight: bolder;
}

.country-card:hover,
.country-card.highlight-10-country:hover,
.country-card.highlight-05-country:hover {
    color: #000000;
    background-color: #ff5100;
}

.country-card.unavailable-country,
.legend-icon-no {
    color: #c9c9c9;
    background: linear-gradient(135deg,
            #ffffff 0%,
            #ffffff 10%,
            #f6f6f6 10%,
            #f6f6f6 20%,
            #ffffff 20%,
            #ffffff 30%,
            #f6f6f6 30%,
            #f6f6f6 40%,
            #ffffff 40%,
            #ffffff 50%,
            #f6f6f6 50%,
            #f6f6f6 60%,
            #ffffff 60%,
            #ffffff 70%,
            #f6f6f6 70%,
            #f6f6f6 80%,
            #ffffff 80%,
            #ffffff 90%,
            #f6f6f6 90%,
            #f6f6f6 100%);
    font-weight: lighter;
}

/* Headers in the country-filings view */
.filing-header {
    padding-bottom: 0px;
}

.filing-header-level-3 {
    color: #ffffff;
    background-color: #333333;
}

.filing-header-level-2 {
    color: #ffffff;
    background-color: #888888;
}

.filing-header-level-1 {
    color: #000000;
    background-color: #dddddd;
}

/* Toasts */
.toast {
    position: fixed;
    top: 8px;
    right: 5px;
}

.toast,
.toast.hide {
    z-index: -1;
}

.toast.show {
    z-index: 4;
}

/* Boostrap-Select */
.bootstrap-select {
    border: 1px solid #ced4da !important;
    background-color: #ffffff !important;
}

.bootstrap-select .dropdown-menu {
    width: 100%;
}

.bootstrap-select .dropdown-menu .dropdown-item .text {
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Table Responsive */
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .table-responsive-vertical-cell-title {
        display: none;
    }
}

/* Smaller than medium devices (tablets, 767px and down) */
@media (max-width: 767px) {
    .table-responsive-vertical-cell {
        width: 100%;
        display: table;
        table-layout: fixed;
    }

    .table-responsive-vertical-cell-title {
        display: table-cell;
        width: 35%;
        font-weight: bold;
        font-size: 1.05em;
        overflow: hidden;
    }

    .table-responsive-vertical-cell-content {
        display: table-cell;
        width: 65%;
        padding-left: 0.5em;
    }
}

/* Circle buttons */

.btn-circle.btn-sm {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    font-size: 8px;
    text-align: center;
}

.btn-circle.btn-md {
    width: 30px;
    height: 30px;
    padding: 7px 10px;
    border-radius: 25px;
    font-size: 10px;
    text-align: center;
}

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 12px;
    text-align: center;
}

/* I'm not sure why we need the ':not(:disabled):not(.disabled)' bit, but the
* thing is that otherwise it doesn't work... */
.btn-secondary:not(:disabled):not(.disabled).active {
    background-color: #ff5100;
    border-color: #ff5100;
}

ul li {
    line-height: normal;
}

.filing-table.card-body {
    padding: 0.25rem;
}

.table-responsive {
    display: table;
}

/* Blinking red fonts */
.blinking {
    animation: blinkingText 1.5s infinite;
    font-weight: bolder;
}

@keyframes blinkingText {
    0% {
        color: #ff0000;
    }

    30% {
        color: #ff0000;
    }

    60% {
        color: #ff0000;
    }

    100% {
        color: #ff0000;
    }

    100% {
        color: transparent;
    }
}

.fa-1-5x {
    font-size: 1.5em;
}

.logged-in .customer-name {
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.5);
}

.logged-in a {
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.5);
}

.logged-in a:hover:not(.active) {
    color: #000000;
    background: rgb(36, 34, 34, 0.05);
}

.dropdown-item.active {
    background-color: #ffffff;
}

.dropdown-item {
    font-size: 13px;
    font-weight: 700;
}

@media (min-width: 768px) {
    .first-row-settings {
        padding-top: 1rem;
    }
}

.country-title {
    padding-bottom: -0.3em;
    display: inline-block;
    font-size: 1.5em;
    margin-right: 10px;
}

.country-subtitle {
    padding-bottom: -0.3em;
    display: inline-block;
    font-size: 1.1em;
}

.responsability-subtitle {
    padding-top: 0.3em;
    display: inline-block;
    font-size: 1.1em;
}

.hover-orange {
    color: #212529;
}

.hover-orange:hover {
    color: #ff5100;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #ff5100;
}

@media (max-width: 991px) {
    .hidden-sm {
        display: none;
    }

    .country-title {
        font-size: 1.2em;
    }

    .country-subtitle {
        font-size: 1.1em;
    }

    .responsability-subtitle {
        padding-top: 0px;
        display: inline-block;
        font-size: 1.1em;
    }
}

@media (min-width: 992px) {
    .hidden-lg {
        display: none;
    }
}

@media (min-width: 768px) {
    .form-login {
        padding-top: 30px
    }
}

.hidden {
    display: none;
}

.margin-left10 {
    margin-left: 10px;
}

.mt-1-5 {
    margin-top: 0.40rem !important;
}

.corporate-modal .modal-content {
    color: #ffffff;
}

#fader {
    z-index: 20;
    opacity: 0.5;
    background: #000000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
}

.spinner-desktop {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-top: -22px;
    margin-left: -22px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.legal-report-type {
    text-transform: uppercase;
    color: rgba(155, 155, 157, 0.9);
}

.legal-report-subtype {
    color: rgba(30, 30, 32, 0.8);
    font-family: sans-serif;
}

.ul-no-dots {
    list-style-type: none;
}

.slider.slider-vertical {
    height: 115px;
    width: 20px;
    margin-top: 10px;
}

.legend-icon {
    font-size: 0.7rem;
    margin-left: 20px;
    width: 34px;
    height: 18px;
    border: 1px solid #000000;
}

/* These are the little color boxes in the filing 'create' and 'edit' forms. */
.importance-level-box {
    border: 1px solid #000000;
    padding: 0 10px 0 10px;
    font-weight: bolder;
}

.importance-level-box-3 {
    color: #ffffff;
    background-color: #333333;
}

.importance-level-box-2 {
    color: #ffffff;
    background-color: #888888;
}

.importance-level-box-1 {
    color: #000000;
    background-color: #dddddd;
}

/* These are the little color dots in the 'actioning' form */
.dot-importance-level-3 {
    height: 15px;
    width: 15px;
    background-color: #333333;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}

.dot-importance-level-2 {
    height: 15px;
    width: 15px;
    background-color: #888888;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}

.dot-importance-level-1 {
    height: 15px;
    width: 15px;
    background-color: #dddddd;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}

/* Actioning collapse icon */
.collapsed>.arrow {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* Lawyer Instructions */
.slider-rangeHighlight {
    background: #f70616;
}

.min-slider-handle {
    background-image: linear-gradient(to bottom, #0480BE, #036fa5) !important;
}

.unsaved-dot {
    height: 15px;
    width: 15px;
    background-color: #f70616;
    border-radius: 50%;
    margin-top: 5px;
}

.phase-instruction {
    margin-left: 80px;
}

@media (max-width: 790px) {
    .slider-tick-label {
        font-size: 12px;
    }
}

@media (min-width: 684px) {
    .text-slider {
        display: none;
    }
}

@media (min-width: 992px) {
    .time-instruction {
        margin-left: calc(-15% + 100px);
    }
}

@media (max-width: 683px) {
    .slider-tick-label {
        display: none !important;
    }
}

@media (max-width: 575px) {

    /* Actioning hide column on xs */
    .d-xs-none {
        display: none !important;
    }

    .phase-instruction {
        margin-left: 20px;
    }

    .slider-tick-label {
        font-size: 10px;
    }

}

.no-blue,
.no-blue:hover {
    color: inherit;
    /* blue colors for links too */
    text-decoration: inherit;
    /* no underline */
}

.hover-click:hover {
    cursor: pointer;
}

.hover-underline:hover {
    text-decoration: underline !important;
}

@media (max-width: 767px) {
    .slider-level {
        width: min-content;
    }

    .legend {
        width: 86%;
    }

    .legend-icon {
        margin-left: 10px;
        width: 23px;
        height: 18px;
        border: 1px solid #000000;
    }

    .slider.slider-vertical {
        height: 115px;
    }
}

.text-box {
    background-color: #dddddd;
    width: 200px;
    height: 150px;
    border: 2px solid silver;
    padding: 1rem;
    text-align: center;
}

/*Chart */
.chart-wrap {
    position: relative;
    padding-bottom: 24rem;
    height: 0;
    overflow: hidden;
}

@media (max-width: 500px) {
    .chart-wrap {
        padding-bottom: 24rem;
    }
}

.chart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
}

@media (min-width: 336px) {
    .edit-button-show {
        margin-top: -17px;
    }
}

/*.chart-pdf {
    position: absolute;
    top: 0;
    left: 0;
    height: 300px;
}*/


/* Company logo */

.logo-content {
    font-size: 15px;
    font-weight: bold;
    padding: 20px;
    line-height: 1.2;
}

.logo-content div {
    padding-top: 3px;
    padding-bottom: 3px;
}

.logo-content .delimiter {
    border-bottom: 1.5px solid rgba(30, 30, 32, 1);
    width: 40%;
    padding-top: 0;
}

.logo-content .header {
    text-transform: uppercase;
    color: rgba(155, 155, 157, 0.9);
}

.logo-content .sub-header {
    color: rgba(30, 30, 32, 0.8);
    font-family: sans-serif;
}

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

/* New design*/
.no-padding-15 {
    margin: -15px;
}

.btn-primary {
    border-radius: 0;
    border-color: #878787;
    background-color: #878787;
}

.btn-primary:focus,
.btn-primary:hover,
.btn-primary:focus:hover,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    background-color: #5b5b5b;
    border-color: #5b5b5b;
    box-shadow: none;
}

/* implemented in mobility calculator */
.btn-calculate {
    border-radius: 0;
    color: #fff;
    background-color: #3490dc;
    border-color: #3490dc;
    border-width: 3px;
    font-weight: bold;
    text-transform: uppercase;
}

.btn-secondary {
    border-radius: 0;
    border-color: #000000;
    background-color: #f6f6f6;
    color: #000000;
}

.btn-secondary:focus,
.btn-secondary:hover,
.btn-secondary:focus:hover,
.btn-secondary:not(:disabled):not(.disabled):active:focus {
    background-color: #dbdbdb;
    border-color: #dbdbdb;
    box-shadow: none;
    color: #000000;
}

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

.guides-card {
    border-radius: 0;
    padding: 0;
    border: 0;
}

.guides-card-header {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff;
    border-radius: 0 !important;
    background-color: #000000;
}

.guides-card-subheader {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    height: 51px;
    color: #ffffff;
    border-radius: 0 !important;
    background-color: #4D4D4D;
}

.card-subheader {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    height: 51px;
    color: white;
    border-radius: 0 !important;
    background-color: #4D4D4D;
}

@media (max-width: 991px) {
    .card-page {
        margin-left: -15px;
        margin-right: -15px;
    }

    .container .card-page {
        margin-left: -30px;
        margin-right: -30px;
    }

    /*Error Messages*/
    .alert:first-child {
        margin-top: 30px;
    }

    .guides-title {
        margin-top: 30px;
    }
}

@media (min-width: 992px) {
    .card-page {
        margin-top: 2.5rem !important;
    }
}

.card-page {
    margin-bottom: 1.5rem;
}

.sign-up-btn {
    border-color: #ffffff;
    background-color: #2d2d2d;
    color: #ffffff;
    text-transform: uppercase;
}

.calculator-form {
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0;
}

.modal-content {
    background-color: black;
    height: 92.5%;
    padding-bottom: 3em;
    margin-bottom: -3.8em;
}

/* Hamburger Menu */
.menu-active {
    color: #FF5100;
    font-weight: bold;
}

/*Center bullet points */
.text-center ul {
    display: inline-block;
}

.tr:hover {
    color: #212529;
    background-color: rgba(0, 0, 0, .5);
}

.proj-progress-card .progress {
    height: 6px;
    overflow: visible;
    margin-bottom: 10px
}

.table {
    margin-bottom: 0;
}

.plans-table td {
    border-top-width: 0px !important;
}

.plans-tr {
    border-bottom: 1px solid #dee2e6;
}

.countdown-row {
    margin: 20px 0.75rem;
    border-radius: 15px;
    background: #dddddd;
    color: #000000;
    padding: 5px 0px;
    width: 215px;
    height: 90px;
    font-family: "IBM Plex Mono", monospace;
}

.countdown-row-mobile {
    margin: 0.25rem 0rem;
    color: #ffffff;
    width: 100%;
    height: 90px;
    font-family: "IBM Plex Mono", monospace;
    justify-content: center;
    align-items: center;
}

.cd-num {
    font-size: 1.25rem;
    justify-content: center;
    align-items: center;
}

.logo-navbar {
    text-align: center;
}

.btn-del-dates {
    padding: 5px 0;
}

.tax-summary-export {
    padding: 4rem;
}

.col-logos {
    padding-top: 0px !important;
    padding-bottom: 1rem !important;
}

.hourglass-spin>[class*="fa-hourglass"] {
    animation: showhide 4s steps(1) infinite;
    opacity: 0;
}

.hourglass-spin>.fa-hourglass-end {
    animation-delay: 2s;
}

.hourglass-spin>.fa-hourglass-half {
    animation-delay: 1s;
}

.hourglass-spin>.fa-hourglass-start {
    animation-delay: 0s;
}

.hourglass-spin>.fa-hourglass-end.spin {
    animation: showhidespin 4s linear infinite;
}

@keyframes showhide {
    0% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }
}

@keyframes showhidespin {
    0% {
        opacity: 0;
    }

    74.9999999% {
        opacity: 0;
    }

    75% {
        opacity: 1;
        transform: rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: rotate(180deg);
    }
}

#goBack {
    margin-top: 0.5rem;
}

@media (max-width: 1050px) {
    .generating {
        height: 100vh;
    }
}

@media (max-width: 1050px) and (max-height: 700px) {
    .generating-content {
        margin-top: 50%;
    }
}

@media (max-width: 1050px) and (min-height: 700px) {
    .generating-content {
        margin-top: 60%;
    }
}

@media (max-width: 1050px) and (min-height: 800px) {
    .generating-content {
        margin-top: 70%;
    }
}

@media (max-width: 800px) and (min-height: 1024px) {
    .generating-content {
        margin-top: 50%;
    }
}

@media (max-width: 769px) {
    .search-col {
        margin-bottom: 0.3rem;
    }
}

@media (max-width: 769px) {
    .title-service {
        margin-top: 2rem;
    }
}

.sidebar-navigation-misc {
    margin: 0 5px;
}

.modal-md {
    max-width: 700px;
}

.alert-danger {
    width: 95%;
}

.row-plans {
    margin-right: 0;
    margin-left: 0;
    width: 100%;
    display: flex;
}

.plans-select {
    width: 100%;
    border-radius: 0 !important;
    background-color: rgb(230, 230, 230);
    color: black !important;
    border: 2px solid transparent !important;
}

.plans-select.active {
    background-color: rgb(230, 230, 230);
    border: 2px solid #ff5100 !important;
}

.plans-select:hover {
    background-color: #ff5100 !important;
    border: 2px solid #ff5100 !important;
    color: white !important;
}

.country-select.active {
    border: 2px solid #ff5100 !important;
}

.country-select:hover {
    color: white !important;
}

.info-icon {
    margin-left: 9px;
    margin-top: 10px;
}

.info-icon {
    display: none;
}

@media (max-width: 767px) {
    .info-icon {
        display: inline;
    }
}

.planDescription {
    text-align: justify;
    text-justify: inter-word;
}

@media (min-width: 1200px) {
    .planDescription {
        max-width: 80%;
    }
}

.country-title-mobility {
    font-size: 1rem;
    color: rgb(255, 255, 255);
    background-color: rgb(128, 128, 128);
    padding: 0.75rem 1.25rem;
    margin-top: 1em;
}

/*Show employee name on mobility calculator from company admin dashboard*/
@media (min-width: 992px) {
    .mobilityEmployeeName {
        margin-bottom: -2em;
    }
}

@media (max-width: 991px) {
    .mobilityEmployeeName {
        margin-top: 1.5em;
    }
}

/* Arrow collapse icon */
.collapsed>.arrow-mobility {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    transform: rotate(270deg);
}

.date-mobility-label {
    margin-left: 0.5em;
    margin-right: 0.5em;
}


/* Hide card for company admin for small sceens */
@media (max-width: 680px) {
    .card-company-dashboard {
        visibility: hidden;

    }

    .table-company-dashboard {
        visibility: visible;
        margin-top: -5em;
        margin-left: -2em;
        border-style: solid;
        border-color: rgba(0, 0, 0, .125);
        ;
    }

}

/*Apply to all childs of dates-calculator*/
.dates-calculator>* {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0.4em;
}

/*Invalid input*/
input.invalid {
    border-color: #c00000;
}

/* Chart to show in PDF */
.chart-pdf {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    visibility: hidden;
}