/* CSS Variables */
:root {
    --main-color-rgb: 55,221,201;
    --main-color: rgb(var(--main-color-rgb));
    --main-color-alpha-10: rgba(var(--main-color-rgb), 0.1);
    --main-color-alpha-20: rgba(var(--main-color-rgb), 0.2);
    --main-color-alpha-30: rgba(var(--main-color-rgb), 0.3);
    --main-color-alpha-40: rgba(var(--main-color-rgb), 0.4);
    --main-color-alpha-50: rgba(var(--main-color-rgb), 0.5);
    --main-color-alpha-70: rgba(var(--main-color-rgb), 0.7);
    --main-color-alpha-80: rgba(var(--main-color-rgb), 0.8);
    --main-color-alpha-90: rgba(var(--main-color-rgb), 0.9);
    --secondary-color-rgb: 255,255,255;
    --secondary-color: rgb(var(--secondary-color-rgb));
    --secondary-color-alpha-80: rgba(var(--secondary-color-rgb), 0.8);
    --secondary-color-alpha-40: rgba(var(--secondary-color-rgb), 0.4);
    --secondary-color-alpha-10: rgba(var(--secondary-color-rgb), 0.1);
    --main-navigation-height: 80px;
    --header-background-color: #fff;
    --main-footer-height: 90px;
    --main-footer-height-mobile: 150px;
    --grithut-font-family: 'Roboto';
    --main-color-dark-90: color-mix(in srgb, var(--main-color) 90%, black);
}

/* Font Declarations */
@font-face {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Gotham/Gotham-Book.otf');
}

@font-face {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: bold;
    src: url('/fonts/Gotham/Gotham-Bold.otf');
}

@font-face {
    font-family: 'Gotham';
    font-style: italic;
    font-weight: 400;
    src: url('/fonts/Gotham/Gotham-BookItalic.otf');
}

@font-face {
    font-family: 'Gotham';
    font-style: italic;
    font-weight: bold;
    src: url('/fonts/Gotham/Gotham-BoldItalic.otf');
}

@font-face {
    font-family: 'Akrobat';
    src: url('/fonts/Akrobat/Akrobat-Regular.otf')
}


/* ------------------------------------------------------------ */
/* -------------------- Main Page Layout ---------------------- */
/* ------------------------------------------------------------ */
html * {
    font-family: var(--grithut-font-family), sans-serif;
}

html {
    position: relative;
    min-height: 100%;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700
}

.form-check label,
.form-switch label{
    margin-bottom: 0;
    font-weight: normal;
}

textarea {
    resize: none;
}
/* Global styles */
.checkbox-agree {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid #707377;
    min-height: 16px !important;
    max-height: 16px !important;
    max-width: 16px !important;
    min-width: 16px !important;
    margin-right: 10px !important;
    display: inline-block;
    cursor: pointer;
}
.mb-120 {
    margin-bottom: 120px;
}
.d-width-60 {
    width: 60% !important;
}
.only-for-mobile {
    display: none !important;
}
.border-light-custom {
    color: #E4E4E4 !important;
}

/* Navigation styles */
.main-navigation-container.hidden {
    display: none;
}

.main-navigation {
    width: 100vw;
    max-height: none;
    align-items: center;
    background: var(--header-background-color);
    height: var(--main-navigation-height);
    position: fixed;
    margin-top: 0px;
    flex-direction: row;
    padding: 5px;
    justify-content: space-between;
    top: 0;
    left: 0;
    display: flex;
    flex-wrap: nowrap;
    z-index: 999;
}

.cursor-pointer {
    cursor: pointer !important;
}
.cursor-text {
    cursor: text !important;
}

.main-navigation-container .nav-logo {
    padding-right: 10px;
    cursor: pointer;
    min-width: 0;
    display: flex;
    padding-left: 60px;
}

    .main-navigation-container .nav-logo img {
        width: 140px;
        height: 80px;
        border-radius: 0px !important;
        max-width: 100%;
        object-fit: contain;
        max-height: 80px;
        margin: 5px;
        flex-basis: 0;
    }

.main-navigation .links-section {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    color: var(--header-font-color);
}

.main-navigation .right-section {
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin-left: 5px;
    color: var(--header-font-color);
}

.main-navigation-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

    .main-navigation-links .navigation-link {
        text-decoration: none;
        border-bottom: 3px solid transparent;
        padding: 5px 10px;
    }

        .main-navigation-links .navigation-link:hover,
        .main-navigation-links .navigation-link.active {
            font-weight:bold;
            /*border-bottom: 3px solid var(--main-color);*/
        }

/* Main page styles */
.main-page-container {
    min-height: calc(100dvh - var(--main-navigation-height) - var(--main-footer-height));
    margin-top: var(--main-navigation-height);
}
@media screen and (max-width: 600px) {
    .main-page-container {
        min-height: calc(100dvh - var(--main-navigation-height) - var(--main-footer-height-mobile));
    }
}
    .main-page-container:has(+ .main-footer-container.hidden) {
        min-height: calc(100dvh - var(--main-navigation-height));
    }

.main-navigation-container.hidden + .main-page-container {
    min-height: calc(100dvh - var(--main-footer-height));
}

    .main-navigation-container.hidden + .main-page-container:has(+ .main-footer-container.hidden) {
        min-height: 100dvh;
    }

/* ------------------------------------------------------------ */
/* ---------------- END of Main Page Layout ------------------- */
/* ------------------------------------------------------------ */

/* ------------------------------------------------------------ */
/* ---------------- Cookie Consent Styles --------------------- */
/* ------------------------------------------------------------ */

:root {
    --cc-btn-primary-bg: var(--main-color);
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-border-color: var(--main-color);
    --cc-btn-primary-hover-bg: var(--main-color-alpha-90);
    --cc-btn-primary-hover-color: #fff;
    --cc-btn-primary-hover-border-color: var(--main-color-alpha-90);
}

/* ------------------------------------------------------------ */
/* ------------- END of Cookie Consent Styles ----------------- */
/* ------------------------------------------------------------ */

/* ------------------------------------------------------------ */
/* --------------------- Button Styles ------------------------ */
/* ------------------------------------------------------------ */

.btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-border-radius: 10rem;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--main-color);
    --bs-btn-border-color: var(--main-color);
    --bs-btn-hover-color: var(--main-color);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--main-color);
    --bs-btn-focus-shadow-rgb: var(--main-color-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--main-color);
    --bs-btn-active-border-color: var(--main-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ddd;
    --bs-btn-disabled-border-color: #ddd;
}

.btn-outline-primary {
    --bs-btn-color: var(--main-color);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--main-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--main-color);
    --bs-btn-hover-border-color: var(--main-color);
    --bs-btn-focus-shadow-rgb: var(--main-color-rgb);
    --bs-btn-active-color: var(--main-color);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: var(--main-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ddd;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #ddd;
}
/* Legacy Skillie buttons, you shouldn't use them anymore */

.bold-button {
    border-radius: 22px;
    padding: 5px 10px;
    color: #fff;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    display: inline-block;
    cursor: pointer;
}

.sized-button {
    padding: 10px 30px;
    border-radius: 2em;
}

.main-button {
    width: max-content;
    padding: 12px 24px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2rem;
    border: none;
    background-color: var(--main-color);
}
    .main-button:hover {
        background-color: var(--main-color-dark-90);
        color: white;
    }
    
.darker-hover:hover {
    filter: brightness(90%);
}

/* ------------------------------------------------------------ */
/* ------------------ END of Button Styles -------------------- */
/* ------------------------------------------------------------ */


/* ------------------------------------------------------------ */
/* ---------------------- Form Styles ------------------------- */
/* ------------------------------------------------------------ */

.form-control:focus {
    box-shadow: none;
    border-color: var(--main-color-alpha-50)
}

.form-group {
    margin-bottom: 15px;
}

/* ------------------------------------------------------------ */
/* ------------------ END of Form Styles ---------------------- */
/* ------------------------------------------------------------ */


/* Global tag styles */
a {
    color: inherit;
    text-decoration: none;
}

    a:hover {
        color: inherit;
    }

/* Account pages styles */
.validation-summary-errors ul {
    list-style: none;
    padding: 0;
}

.account-page-container {
    max-width: 1100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    margin: 50px auto;
    /* min-height: calc(100vh - 190px); */
}

.account-page-left {
    flex: 40%;
    padding: 0 3em;
    width: 100%;
    margin-right: 20px;
}

    .account-page-left h1 {
        font-size: 35px;
        color: #333;
        font-weight: 800;
        margin-bottom: 1em;
    }

.account-page-right {
    flex: 60%;
}

    .account-page-right label {
        font-weight: normal;
    }

@media only screen and (max-width: 1000px) {
    .account-page-left img {
        max-height: 150px;
    }
    .account-page-container {
        padding-left:20px;
        padding-right:20px;
        flex-direction:column;
        margin-top: 30px;
    }
    .only-for-mobile{
        display: block !important;
    }
    .only-for-desctop {
        display: none !important;
    }
    .mobile-no-margin{
        margin:0px !important;
    }
    .job-candidates-wrapper{
        padding: 0 10px;
    }
    .mobile-column{
        flex-direction: column;
    }
    .mobile-column-start {
        align-items: flex-start !important;
    }
}


/* Form styles */
.form-field {
    border-bottom: 1px solid #EEE;
    padding: 2em 0;
}

    .form-field input, .form-field label, .form-field textarea {
        width: 100%;
    }

    .form-field input, .form-field textarea {
        height: 50px;
        border-radius: 2em;
        padding-left: 1.25em;
        border: 1px solid var(--main-color-alpha-10);
        background-color: var(--main-color-alpha-10);
    }


        .form-field input:focus, .form-field textarea:focus {
            background-color: white;
            border-color: var(--main-color);
        }

    .form-field label {
        padding-left: 1.25em;
    }

    .form-field textarea {
        width: 100%;
        height: 160px;
        padding-top: 1em;
    }

        .form-field textarea + .CodeMirror {
            height: 140px !important;
        }

    .form-field.image-field img {
        max-width: 100%;
        max-height: 50px;
    }

    .form-field.image-field .btn-remove, .image-upload .btn-remove {
        display: inline;
        color: #FF5C75;
        margin-right: 20px;
        margin-left: 20px;
        cursor: pointer;
    }

    .form-field.image-field .btn-change,
    .form-field.image-field .btn-upload,
    .image-upload .btn-change,
    .image-upload .btn-upload {
        padding-left: 0;
        text-align: center;
        padding-top: 10px;
        height: 45px;
        font-weight: normal;
        border: 1px solid var(--main-color);
        border-radius: 23px;
        margin-right: 1em;
        cursor: pointer;
    }

    .form-field.image-field .btn-change,
    .image-upload .btn-change {
        width: 114px;
    }

    .form-field.image-field .btn-upload,
    .image-upload .btn-upload {
        width: 165px;
    }

.form-buttons {
    display: flex;
    justify-content: flex-end;
}

    .form-buttons .cancel-button {
        margin-right: 2em;
        color: var(--skilly-main-color);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .form-buttons .submit-button {
        height: 50px;
        border-radius: 2em;
        border: 1px solid var(--main-color);
        background-color: var(--main-color);
        color: white;
        width: 140px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

        .form-buttons .submit-button:hover, .form-buttons .submit-button:focus {
            color: black;
            background-color: white;
            cursor: pointer;
        }

    .form-buttons .cancel-button:hover {
        cursor: pointer;
    }

/* Modal styles */
@media only screen and (max-width: 768px) {
    .hide-on-mobile{
        display: none;
    }
    .d-width-60 {
        width: 100% !important;
    }
    .edit-modal .modal-dialog.modal-lg .modal-body {
        height: calc(100vh - 52px) !important;
    }

    .edit-modal .modal-dialog.modal-lg .modal-footer {
        display: none;
    }
}

.status-menu {
    position: absolute;
    top: 3.25em;
    background-color: white;
    width: 17em;
    box-shadow: 0px 3px 6px #00000029;
    border: 1px solid #CCC;
    border-radius: 5px;
    z-index: 101;
    left: 0.35em;
}

.status-item {
    padding: 0.5em 1em;
    cursor: pointer;
    text-decoration: none;
}

    .status-item:hover {
        background-color: #F8F8F8;
    }

/* Form content styles */
.edit-form {
    height: calc(100% + 30px);
    max-height: calc(100% + 30px);
    margin: -15px;
}

    .edit-form.auto-height {
        height: auto;
    }

.edit-form-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .edit-form-content.no-padding {
        padding: 0;
    }

    .edit-form-content .form-control,
    .edit-form-content label,
    .edit-form-content span,
    .edit-form-content p {
        font-size: 16px !important;
    }

    .edit-form-content .form-group label {
        color: #333;
        font-weight: normal;
    }

/* Form components styles */

/* Use our style for editor */
.edit-form .edit-form-content .markdown-editor-container .auto-textarea-input {
    font-family: inherit !important;
}

/* Hide Upload image button */
.edit-form .edit-form-content .markdown-editor-container .dropdown .op-image > .dropdown-item:not(:first-child) {
    display: none;
}

/* Edit tabs styles */
.edit-tabs-container {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.edit-tabs-list-container {
    width: 25%;
    border-right: 1px solid #e5e5e5;
}

    .edit-tabs-list-container ul.edit-tabs-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .edit-tabs-list-container ul.edit-tabs-list > li {
            display: flex;
            width: 100%;
            padding: 20px 20px;
            margin: 0;
            cursor: pointer;
            font-size: 16px;
            text-transform: uppercase;
            transition: all 0.3s ease-in-out;
            background-color: #fff;
            color: #00545D;
        }

            .edit-tabs-list-container ul.edit-tabs-list > li .tab-icon-svg {
                align-self: center;
                pointer-events: none;
                filter: invert(25%) sepia(19%) saturate(2572%) hue-rotate(142deg) brightness(97%) contrast(101%); /* filter for #00545D */
            }

            .edit-tabs-list-container ul.edit-tabs-list > li.active {
                background-color: #00545D;
                color: #fff;
            }

                .edit-tabs-list-container ul.edit-tabs-list > li.active .tab-icon-svg {
                    filter: invert(100%) sepia(0%) saturate(5188%) hue-rotate(239deg) brightness(140%) contrast(121%); /* filter for #ffffff */
                }

            .edit-tabs-list-container ul.edit-tabs-list > li:hover {
                background-color: rgba(0, 84, 93, 0.3);
            }


.edit-tabs-page-container {
    display: flex;
    flex-direction: column;
    width: 75%;
    padding: 10px 15px;
}

    .edit-tabs-page-container .edit-tabs-page-tabs {
        overflow-y: auto;
        margin-right: -15px;
        padding-right: 15px;
        flex-grow: 1;
    }

/* Edit wizard tabs styles */
.edit-wizard-tabs-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.edit-wizard-tabs-list-container {
}

    .edit-wizard-tabs-list-container ul.edit-wizard-tabs-list {
        display: flex;
        flex-direction: row;
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .edit-wizard-tabs-list-container ul.edit-wizard-tabs-list > li {
            display: flex;
            padding: 10px;
            margin: 0 5px 10px 5px;
            cursor: pointer;
            font-size: 14px;
            text-transform: uppercase;
            transition: all 0.3s ease-in-out;
            background-color: #fff;
            border-bottom: 3px solid #e5eeee;
            color: #333;
        }

            .edit-wizard-tabs-list-container ul.edit-wizard-tabs-list > li.active {
                border-bottom: 3px solid #559995;
            }

            .edit-wizard-tabs-list-container ul.edit-wizard-tabs-list > li:hover {
                border-bottom: 3px solid #559995;
            }


.edit-wizard-tabs-page-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 10px 15px;
}

    .edit-wizard-tabs-page-container .edit-wizard-tabs-page-tabs {
        overflow-y: auto;
        margin-right: -15px;
        padding-right: 15px;
        flex-grow: 1;
    }

.edit-wizard-buttons {
    position: fixed;
    bottom: 5px;
    left: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@media only screen and (max-width: 768px) {
    .edit-wizard-buttons {
        position: relative !important;
        bottom: unset !important;
        left: 0 !important;
        width: inherit !important;
    }
}

.edit-wizard-delete-button {
    display: flex;
    margin: 5px auto 5px 0;
}

    .edit-wizard-delete-button > * {
        margin: 0 10px;
    }

.edit-wizard-nav-buttons {
    display: flex;
    margin: 5px auto;
    width: 230px;
}

    .edit-wizard-nav-buttons .wizard-back-button {
        margin-left: 0;
        margin-right: auto;
    }

    .edit-wizard-nav-buttons .wizard-next-button {
        margin-left: auto;
        margin-right: 0;
    }


.edit-wizard-save-cancel-buttons {
    display: flex;
    margin: 5px 0;
}

    .edit-wizard-save-cancel-buttons > * {
        margin: 0 10px;
    }

.centered-box{
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-button {
    height: 40px;
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color);
    background-color: white;
    border: 1px solid var(--main-color);
    border-radius: 22px;
    font-size: 14px;
    cursor: pointer;
    padding: 5px 10px;
}

/* Choose file button style hack */
.btn-file {
    position: relative;
    overflow: hidden;
}

    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }

/* Save and cancel buttons */
.edit-save-cancel-buttons {
    position: fixed;
    top: 15px;
    left: 0;
    width: 100%;
    display: none;
}

    .edit-save-cancel-buttons > .edit-buttons-wrapper {
        position: absolute;
        right: 15px;
    }

.edit-save-cancel-buttons-footer {
    position: fixed;
    bottom: 5px;
    left: 20px;
    width: 100%;
}

/* Tags classification */
.edit-form-content .classification-list {
    background-color: #fff !important;
    padding-left: 0;
    list-style: none;
}

    .edit-form-content .classification-list li {
        width: 120px;
        margin: 0 2px 15px 2px;
        border: 1px solid #fff;
        border-radius: 5px;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

        .edit-form-content .classification-list li:hover {
            background-color: #eeeeee;
        }

        .edit-form-content .classification-list li.active {
            border: 1px solid #00545D;
            border-radius: 5px;
        }

        .edit-form-content .classification-list li span {
            cursor: inherit;
            display: grid;
        }

        .edit-form-content .classification-list li img {
            margin-top: 5px;
            max-width: 30px;
        }

/* Multiselect styles */
.edit-form-content .multiselect .multiselect__tag{
    background: #00545d;
}

.multiselect .multiselect__option--highlight,
.edit-form-content .multiselect .multiselect__option--highlight,
.edit-form-content .multiselect .multiselect__option--highlight::after {
    background-color: var(--main-color-alpha-10) !important;
    color: #000;
}

.edit-form-content .multiselect .multiselect__tag-icon:focus,
.edit-form-content .multiselect .multiselect__tag-icon:hover {
    background: #f5f5f5;
}

.edit-form-content .multiselect .multiselect__spinner:after,
.edit-form-content .multiselect .multiselect__spinner:before {
    border-color: var(--main-color-alpha-40) transparent transparent;
}

.multiselect,
.multiselect__input,
.multiselect__single,
.edit-form-content .multiselect,
.edit-form-content .multiselect__input,
.edit-form-content .multiselect__single {
    font-size: 16px !important;
    color: #000;
    /* background-color: #f0f2f5 !important; */
}

.multiselect__tag-icon::after {
    color: white !important;
}

.edit-modal-dropdown-container .multiselect__content-wrapper {
    max-height: 300px !important;
}

.multiselect__content-wrapper {
    overflow-x: hidden !important;
}

.edit-form-content .multiselect__content,
.company-selector-wrapper .multiselect__content {
    max-width: 100% !important;
}

/* Multiselect custom option styles */
.ms-option-container {
    display: flex;
    flex-wrap: nowrap;
    height: 30px !important;
    max-width: 90% !important;
}

.ms-option-container-small {
    display: flex;
    flex-wrap: nowrap;
    height: 20px !important;
    max-width: 90% !important;
}

.ms-option-image img {
    max-width: 30px;
    max-height: 30px;
}

.ms-option-image.faq img {
    max-width: 30px;
    max-height: 30px;
    border-radius: 50%
}

.ms-text-container {
    display: flex;
    width: 100%
}

.ms-option-desc.faq {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    opacity: 0.6;
    z-index: 1001;
}

.menu-button {
    border-radius: 2em;
    width: 30px;
    height: 30px;
    padding: 0.3em;
    background-color: white;
    cursor: pointer;
}

    .menu-button:hover {
        background-color: #EEE;
    }

.delete-button {
    color: red;
}

.user-action-menu {
    box-shadow: 0px 3px 6px #00000029;
    border: 0.5px solid #CCCCCC;
    border-radius: 5px;
    position: absolute;
    top: 2.5em;
    left: -5em;
    display: none;
    background-color: white;
    z-index: 999;
}

    .user-action-menu span {
        display: block;
        padding: 0.5em;
        padding-right: 4em;
        padding-left: 1em;
    }

        .user-action-menu span:hover {
            background-color: #F5F5F5;
            cursor: pointer;
        }

.fixedShareBtn a {
    width: 60px;
    height: 60px;
    background-position: center center;
    background-size: inherit;
    background-repeat: no-repeat;
    box-sizing: border-box;
    display: inline-block;
    text-indent: -99999px;
    color: transparent;
    padding: 0px;
    border-bottom: 1px solid #C6DDD9;
    cursor:pointer;
}

.fixedShareBtn .fixed-btn-fb a {
    background-image: url("/content/icons/facebook-fixed-share.svg");
}

.fixedShareBtn .fixed-btn-linkedin a {
    background-image: url("/content/icons/linkedIn-fixed-share.svg");
}

.fixedShareBtn .fixed-btn-copy a {
    background-image: url("/content/icons/copyLink-fixed-share.svg");
}

.fixedShareBtn .fixed-btn-email a {
    background-image: url("/content/icons/email-fixed-share.svg");
}

.w-940{
    width:940px !important;
}



@media only screen and (max-width: 768px) {
  
    .w-940 {
        width: 100% !important;
    }

    .ms-text-container {
        display: flex;
        width: calc(100vw - 80px);
    }

    .ms-option-title {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.ms-option-image-small img {
    max-width: 20px;
    max-height: 20px;
}

.ms-option-info {
    display: inline-block !important;
    margin-left: 10px !important;
    padding: 0 5px !important;
    max-width: 100% !important;
}

    .ms-option-info > span {
        display: block !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        max-width: 100% !important;
        cursor: pointer !important;
    }

.ms-option-desc {
    color: #ADADAD !important;
    font-size: 1.4rem !important;
}

.no-border {
    border: none;
}

.no-hover-color:hover {
    background-color: var(--main-color) !important;
    color: white;
}

.modal-footer-buttons-wrapper {
    padding: 0.5em 0;
}

.youtube-video-image {
    border-radius: 0.5em !important;
    height: 435px !important;
    box-shadow: -50px 50px 0 -2px #F8F8F8;
    width: 835px !important;
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.youtube-video-button {
    position: absolute;
    width: 90px;
    height: 60px;
    z-index: 0;
    background-image: url(/content/icons/play.svg);
    background-size: 66.7%;
    background-color: #0000;
    box-shadow: none;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .9;
    border-radius: 6px;
    cursor: pointer;
}

.job-youtube-video-image {
    cursor: pointer;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
}

.fs-14{
    font-size: 14px !important;
}
.fw-bold {
    font-weight: bold !important;
}
.w-90{
    width: 90% !important;
}
.w-95{
    width: 95% !important;
}
.w-max-content {
    width: max-content !important;
}

.py-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.py-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}


.object-fit-contain{
    object-fit: contain !important;
}
.hover-postbank-button:hover {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    color: white !important;
}

.available-job:hover {
    border: 1.5px solid var(--main-color);
}

.white-button{
    background-color:white;
    color:black;
}

.bold-button:not(.white-button):hover, .bold-button:not(.white-button):active {
    background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), var(--main-color);
}

.bold-button.white-button:hover, .bold-button.white-button:active {
    color: var(--main-color);
}

.chatbot-info-section {
    display: flex;
    justify-content: flex-start;
    align-items: normal;
    margin-top: 1em;
}

.chatbot-image-container {
    display: flex;
    width: 2.25em;
    height: 60px;
    margin-right: 10px;
}

    .chatbot-image-container img {
        width: auto;
        height: 50%;
        border-radius: 50%;
    }

.product-full-wrapper {
    width: 1200px;
    height: max-content;
    box-shadow: 0px 3px 10px #80808033;
    border-radius: 10px;
}

.underlined{
    text-decoration: underline;
}

.underline-hover {
    cursor: pointer;
}

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

.job-tile {
    margin: 1em 0;
    padding: 2em;
    box-shadow: rgba(128, 128, 128, 0.2) 0px 3px 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    width: 378px;
    min-height: 247px;
    margin-right: 2em;
}

    .job-tile:nth-child(3n) {
        margin-right: 0;
    }

.available-jobs-wrapper {
    display: flex;
    width: 1200px;
    margin: 2em auto 0;
    flex-wrap: wrap;
}

.learn-more-link {
    color: var(--main-color);
    cursor: pointer;
}

    .learn-more-link:hover {
        text-decoration: underline;
    }


.job-posting-title {
    font-size: 25px;
    font-weight: bold;
    padding-right: 0.25em;
    cursor: pointer;
}

    .job-posting-title:hover {
        text-decoration: underline;
    }

.hover-webchat-color:hover {
    cursor: pointer;
    text-decoration: underline;
    color: var(--main-color);
}
#news_list .article-list-col {
    /*border: 1px solid;
    border-color: #ADADAD;*/
    padding: 20px;
    /*border: 1px solid #efefef;*/
}

#news_list.webchat-active {
    padding: 0 !important;
    margin: 0 !important;
}

#news_list .article-list-col.compact {
    padding: 5px 20px;
    border: none;
    border: 1px solid #E5EEEE;
    border-radius: 5px;
    margin-bottom: -1px;
    /* Max width for compact elements */
    /*max-width: 600px;*/
}
#events_list .article-list-col {
    padding: 20px;
}

#events_list .article-list-col.compact {
    padding: 5px 20px;
    border: none;
    border: 1px solid #E5EEEE;
    border-radius: 5px;
    margin-bottom: -1px;
}

.edit-panel-button {
    border: solid 1px var(--main-color);
    border-radius: 10px;
    color: #333;
    transition: all ease-in-out .25s;
    margin-top: 10px;
    font-weight: normal;
    padding: 5px 8px;
    font-size: 14px;
    background-color: #fff;
    display: inline-block;
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}


    .edit-panel-button:hover,
    .edit-panel-button.active {
        /*background-color: rgba(160, 200, 200, 0.30);*/
        background-color: var(--main-color);
        color: #000;
    }

    .edit-panel-button:disabled {
        border: 1px solid #999999;
        background-color: #cccccc;
        color: #666666;
    }


.btl-banner {
    background: linear-gradient(90deg, #00508c 0%, #96d2ff 50%,  #00508c 100%) !important;
    color: white !important;
}

.postbank-banner {
    background-color: #033E8B !important;
    color: white;
}

.btl-button {
    background: transparent !important;
    border: 1px solid white !important;
    color: white !important;
}

    .btl-button:hover {
        background: white !important;
        color: #96d2ff !important;
    }

.btl-secondary-button {
    background: var(--main-color) !important;
    color: white !important;
}

    .btl-secondary-button:hover {
        background: var(--secondary-color) !important;
        border-color: var(--secondary-color) !important;
        color: white !important;
    }

.btl-refer-button {
    background: var(--main-color-alpha-10) !important;
    color: var(--main-color) !important;
}

    .btl-refer-button:hover {
        background: var(--main-color) !important;
        border-color: var(--main-color-alpha-10) !important;
        color: white !important;
    }

.edit-panel-button2 {
    border: 1px solid var(--main-color);
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    color: var(--skilly-main-color);
    text-decoration: none !important;
    display: inline-block;
    cursor: pointer;
    font: bold 14px / 17px var(--grithut-font-family);
    transition: all 0.25s ease-in-out 0s;
    position: relative;
    padding: 7px 19px;
}

    .edit-panel-button2:hover {
        color: #000;
    }


.listed-search .search-input {
    border: 1px solid black;
    border-left-color: black;
    border-left-style: solid;
    border-left-width: 1px;
    border-left: none;
    border-radius: 0 2em 2em 0;
    height: 50px;
    width: 235px;
    padding-left: 0 !important;
    background-color: #F5F5F5 !important;
    border-color: #F5F5F5 !important;
}

.listed-search {
    display: flex;
}

    .listed-search .search-icon {
        border: 1px solid black;
        border-right: none;
        border-radius: 2em 0 0 2em;
        height: 50px;
        padding: 0.9em;
        background-color: #F5F5F5 !important;
        border-color: #F5F5F5 !important;
    }

/* Mobile style */

@media only screen and (max-width: 768px) {
    .product-full-wrapper {
        width: 100vw;
    }
}

.mobile {
    display: none;
}
/* -------------------------------------*/
/* ------- Mobile Hamburger Menu -------*/
/* -------------------------------------*/

.mobile-hamburger-menu-overlay {
    z-index: 1;
    background-color: #b2b2b2;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.mobile-hamburger-menu {
    position: absolute;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 350px;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    background-color: #f8f8f8;
}

    .mobile-hamburger-menu .top-menu-part {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 0px;
        font-size: 45px;
    }

        .mobile-hamburger-menu .top-menu-part .menu-close-button {
            /*padding: 0 10px;
            margin-top: 25px;*/
            position: relative;
            top: 30px;
            right: 24px;
        }

    .mobile-hamburger-menu .user-profile-section {
        display: flex;
        padding: 25px 30px;
    }

        .mobile-hamburger-menu .user-profile-section .profile-image-container {
            display: flex;
            align-items: center;
        }

            .mobile-hamburger-menu .user-profile-section .profile-image-container img {
                height: 45px;
                width: 45px;
                border-radius: 50px;
            }

        .mobile-hamburger-menu .user-profile-section .user-profile-container {
            margin-left: 10px;
        }

            .mobile-hamburger-menu .user-profile-section .user-profile-container .user-name {
                font-size: 16px;
                font-weight: bold;
            }

            .mobile-hamburger-menu .user-profile-section .user-profile-container .user-profile-links {
                display: flex;
                flex-direction: row;
            }

            .mobile-hamburger-menu .user-profile-section .user-profile-container .user-profile-link {
                color: var(--main-color);
                cursor:pointer;
            }

            .mobile-hamburger-menu .user-profile-section .user-profile-container .user-profile-link-separator {
                font-size: 6px;
                line-height: 24px;
                margin: 0 10px;
            }

    .mobile-hamburger-menu .separator-line {
        border-bottom: 1px solid #ccc;
        margin: 0 30px;
    }

    .mobile-hamburger-menu .menu-items {
        display: flex;
        flex-direction: column;
        /*padding: 10px 0;*/
        padding-bottom: 70px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

        .mobile-hamburger-menu .menu-items .main-mobile-navigation-links,
        .mobile-hamburger-menu .menu-items .main-mobile-navigation-links .main-navigation-links,
        .mobile-hamburger-menu .menu-items .global-menu-items {
            display: flex;
            flex-direction: column;
        }

            .mobile-hamburger-menu .menu-items .main-mobile-navigation-links .navigation-link,
            .mobile-hamburger-menu .menu-items .menu-link {
                /* !important because we need to override shitty Eva styles */
                margin: 0;
                cursor:pointer;
                padding: 15px 30px;
                width: 100%;
                background-color: transparent !important;
                color: #333 !important;
                text-align: initial;
                font-size: 16px;
                font-weight: normal;
                border: none !important;
                display:block;
            }

                .mobile-hamburger-menu .menu-items .main-mobile-navigation-links .navigation-link.active,
                .mobile-hamburger-menu .menu-items .menu-link.active {
                    /* !important because we need to override shitty Eva styles */
                    margin: 0;
                    background-color: white !important;
                    color: var(--main-color) !important;
                }

.mobile-navigation-links .navigation-link{

}
.bg-main-color {
    background-color: var(--main-color) !important;
}
.bg-main-color-alpha-10 {
    background-color: var(--main-color-alpha-10) !important;
}
.bg-main-color-alpha-20 {
    background-color: var(--main-color-alpha-20) !important;
}
.bg-main-color-alpha-30 {
    background-color: var(--main-color-alpha-30) !important;
}
/* -------------------------------------*/
/* ----- Mobile Hamburger Menu END -----*/
/* -------------------------------------*/

/* -------------------------------------*/
/* -------         Loader        -------*/
/* -------------------------------------*/

.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: var(--main-color);
  animation: l15 1s infinite linear;
}
.loader::before,
.loader::after {    
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
  animation: l15 2s infinite;
}
.loader::after {
  margin: 8px;
  animation-duration: 3s;
}
@keyframes l15{ 
  100%{transform: rotate(1turn)}
}

/* -------------------------------------*/
/* -------      Loader END       -------*/
/* -------------------------------------*/

@media (max-width: 768px) {
    .main-navigation-container .nav-logo {
        padding-left: 10px;
    }

    .job-tile {
        margin-right: 0;
    }

    .available-jobs-wrapper {
        justify-content: center;
        width: 100%;
    }

    .mobile {
        display: flex;
    }

    .mobileWidthFull {
        width: 100% !important;
    }

    .mobileContain{
        object-fit:contain !important;
        background-size:contain !important;
    }

    .job-youtube-video-image {
        background-size: contain;
    }

    .youtube-video{
        max-height:19em;
    }

    .edit-save-cancel-buttons-footer {
        position: relative !important;
        bottom: unset !important;
        left: 0 !important;
        width: inherit !important;
    }

        .edit-save-cancel-buttons-footer .col-xs-12 > .btn-danger {
            margin-bottom: 15px;
        }

    .edit-form-content .multiselect__tag {
        white-space: normal !important;
        padding: 4px 15px 4px 10px !important;
    }
}

@media (max-width: 450px) {
    .edit-form-content .multiselect__tag{
        word-break: break-all !important;
    }
}
@media only screen and (max-width: 768px) {
    .company-jobs-section {
        width: 100% !important;
        height: max-content;
        padding: 2em 3em;
        margin-bottom: 2em;
    }

    .available-jobs-text {
        margin: 0.5em 1em 1.5em;
        text-align: center;
        padding: 0 !important;
    }

    .postbank-banner-image {
        width: 100%;
        height: 132px;
        object-fit: cover;
        object-position: center top;
    }

    .skill-dropdown-wrapper, .jobs-filters-wrapper {
        width: 100% !important;
    }

    .jobs-filters-wrapper {
        flex-wrap: wrap;
    }

    .jobs-header {
        width: 100% !important;
    }

    .mobileHeightAuto {
        height: auto !important;
    }

    .mobileFlexAlignStart {
        align-items: flex-start !important;
    }

    .mobileColumnStart1230 {
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .mobileWidthAuto {
        width: auto !important;
    }

    .mobileFlexJustifyEnd {
        justify-content: flex-end !important;
    }

    .mobileFlexAlignStart {
        align-items: flex-start !important;
    }

    .mobileMB5 {
        margin-bottom: 5px !important;
    }

    .mobileNoMR {
        margin-right: 0 !important;
    }

    .jobs-page-title {
        padding-left: 1em;
        font-size: 30px;
    }

    .available-positions-wrap {
        width: 100vw;
        flex-wrap: wrap;
    }

    .mobileMB20 {
        margin-bottom: 20px !important;
    }

    .mobileNoML {
        margin-left: 0px !important;
    }

    .mobileColumnStart1230 {
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .mobilePLPR-2 {
        padding-left: 2em !important;
        padding-right: 2em !important;
    }

    .available-jobs-main-wrapper {
        width: 100% !important;
        flex-wrap:wrap;
    }
}
@media only screen and (max-width: 1200px) {
    .desctop {
        display: none !important;
    }
}

@media only screen and (max-width: 800px) {
    .company-positions-container header {
        bottom: 0px !important;
        margin-bottom: 40px;
        align-items: center;
        justify-content: flex-end;
    }

    .company-skills-button-holder {
        position: absolute;
        top: -70px;
        right: 0px;
    }

        .company-skills-button-holder .bold-button.add-button {
            width: auto !important;
        }

            .company-skills-button-holder .bold-button.add-button div {
                padding-right: 0px !important;
            }

    .mobileSmallHeight {
        max-height: 150px;
    }

    .customCompanyPagePart2 img.coverImg {
        margin-right: 20px !important;
        margin-bottom: 20px;
    }

    .mobile-flex-wrap {
        flex-wrap: wrap;
    }

    .mobileColumnCenter1230 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .mobileColumnStart1230 {
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .mobileFlexAlignStart {
        align-items: flex-start !important;
    }

    .mobileFlexJustifyEnd {
        justify-content: flex-end !important;
    }

    .mobileMarginO {
        margin: 0px !important;
    }

    .mobileMB20 {
        margin-bottom: 20px !important;
    }

    .mobileMB5 {
        margin-bottom: 5px !important;
    }

    .mobileNoML {
        margin-left: 0px !important;
    }

    .mobileNoMR {
        margin-right: 0px !important;
    }

    .mobileNoMT {
        margin-top: 0px !important;
    }

    .mobilePLPR-2 {
        padding-left: 2em !important;
        padding-right: 2em !important;
    }

    .mobileNoPB {
        padding-bottom: 0px !important;
    }

    .gritHut-home3-cover {
        width: 90%;
    }

    .seeMoreAbout {
        margin-top: 15px;
    }

    .mobileHeightAuto {
        height: auto !important;
    }

    .mobileWidthAuto {
        width: auto !important;
    }

    .mobileNoShadow {
        box-shadow: none !important;
    }
}