body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* ### Boostrap overrides ### */



/*Override Bootsrap css navbar.less, adjust padding from 15px 15px to 6px 15px, DT*/
.navbar-brand {
    float: left;
    padding: 6px 15px;
    font-size: 18px;
    line-height: 20px;
    height: 50px;
}

.nav-wrapper {
    position: relative;
    margin-top: 1rem;
    padding-top: 1rem;
}


/* ## End Boostraps overrides ## */


/*
    .btn--highlight is an helper i those cases you dont have an "active "color for e.g buttons.
    Just ad this when the button should be "active" and it will become lighter then the original state.
    This will work with all buttons and even other elements but is primary for the active state of Save-button.
    / DT
*/
.btn--highlight {
    filter: brightness(120%)
}

/*Muted button colors when hovered*/
.btn-default:hover {
    background-color: #94649e;
    border-color: #94649e;
}

.btn-primary:hover {
    background-color: #86f0d2;
    border-color: #86f0d2;
}

.btn-success:hover {
    background-color: #8cb88c;
    border-color: #8cb88c;
}

.btn-info:hover {
    background-color: #817dff;
    border-color: #817dff;
}

.btn-warning:hover {
    background-color: #b59165;
    border-color: #b59165;
}

.btn-danger:hover {
    background-color: #a6677a;
    border-color: #a6677a;
}
/*End muted buttons*/



/* Make selects in grids a tad wider */
.dhx_combo_select {
    min-width: 140px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 3vW;
    padding-right: 3vW;
}

/* buttons and links extension to use brackets: [ click me ] */
.btn-bracketed::before {
    display: inline-block;
    content: "[";
    padding-right: 0.5em;
}

.btn-bracketed::after {
    display: inline-block;
    content: "]";
    padding-left: 0.5em;
}



/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

@media (min-width: 992px) {
    .modal-xl {
        width: 1200px;
    }
}

/*Loading*/

.loader {
    position: fixed;
    width: 20%; /* Set your desired with */
    z-index: 2; /* Make sure its above other items. */
    top: 50%;
    left: 50%;
    margin-top: -10%; /* Changes with height. */
    margin-left: -10%; /* Your width divided by 2. */
    /* You will not need the below, its only
           for styling   purposes.*/
    padding: 10px;
    text-align: center;
}

.editable-mentor-label-edit-window {
    background-color: #BAD06B;
    border: 1px solid #8E9E55;
    border-radius: 5px;
    height: auto;
    left: 15px;
    padding: 8px 9px 8px;
    position: absolute;
    text-align: center;
    top: 4px;
    z-index: 99999999;
    box-shadow: 0 0 54px;
}

.layoutLabel {
    font-size:16px;
}

#btnEditableMentorLabelSubmit {
    /*font-size: 12px !important;
    font-weight: normal !important;
    margin-left: 5px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 2px;
    padding-bottom: 2px;*/
    width: 30%;
}

#editableMentorLabelText {
    border: 1px solid #8E9E55;
    display: inline-block;
    width: 70%;
}

/* Dhtmlx Grid */
div.gridbox {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* Main button toolbar */
.mentor-toolbar {
    padding-bottom: 10px;
}

/* File inputs are placed off screen, use a label to make 'em pretty */
.hidden-file-input {
    position: absolute;
    left: -9999px;
    /*top: -9999px;*/
}

.profile-picture, .cr-viewport {
    border-radius: 10%;
}

.profile-picture {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    height: auto;
}

/* Loading spinner */
.spinner {
    margin: 100px auto 0;
    width: 70px;
    text-align: center;
}

    .spinner > div {
        width: 18px;
        height: 18px;
        background-color: #333;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

/* Profile styles quickfix */
.modal.profile-modal .modal-content {
    border: none;
}

.modal.profile-modal .modal-header {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: #5cb85c; /*2e2e2e, 00BE5F*/
    color: #FFF;
    /*text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);*/
}

    .modal.profile-modal .modal-header h2 {
        font-weight: bold;
    }

.modal.profile-modal .close {
    color: #FFF;
}

.profile-group {
    margin-bottom: 10px;
}

.profile-label {
    display: block;
    font-weight: bold;
    /* color: #870AA0; */
    margin-bottom: 1px;
    font-size: 12px;
}

.almi-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 250px 66px;
    border-color: transparent transparent #006351 transparent;
    position: absolute;
    right: 0;
    bottom: 0;
}

.almi-ul {
    list-style-type: none;
    padding: 0;
}

    .almi-ul li::before {
        content: "• ";
        /*color: #febb66, FF5F0A;*/
        color: #FA1996;
    }

.mentor-alert {
    padding: 10px;
    z-index: 8000;
    animation: mentor-alert-appear 250ms ease-out;
}

    .mentor-alert .alert {
        box-shadow: 1px 1px 10px rgba(1, 1, 1, .2);
    }

        .mentor-alert .alert.alert-success {
            /*background-color: #007463;*/
            background-color: #00BE5F;
            border-color: #00a452;
            color: #ffffff;
        }

@keyframes mentor-alert-appear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.dz-message {
    padding: 12px;
    background: #FFF;
    border: 1px dashed #870AA0; /* 007463 */
    border-radius: 5px;
    text-align: center;
}

/* Small i-button in certain grid headers */
.grid-header-info-btn {
    color: #b160c2;
    cursor: pointer;
}

    .grid-header-info-btn:hover {
        filter: brightness(120%);
    }

/* Terms modal */
.almi-terms-modal .modal-content {
    border: none;
    border-radius: 0;
}

.almi-terms-modal .modal-header {
    background-color: #870aa0;
    border-bottom: none;
}

.almi-terms-modal .modal-body {
    padding: 20px;
    padding-top: 14px;
    max-width: 428px;
    margin: 0 auto;
}

.almi-terms-modal .modal-logo {
    padding: 20px;
}

    .almi-terms-modal .modal-logo .img-responsive {
        max-height: 50px;
    }

.almi-terms-modal .modal-footer {
    border-top: none;
}

/* Required field marks */
.mentor-required-mark::after {
    content: ' *';
    color: #b10000;
}

/* Loading overlay */
.mentor-loading-overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(1, 1, 1, .2);
    display: none;
    z-index: 8000;
}

    .mentor-loading-overlay.is-fullscreen {
        position: fixed;
    }

    .mentor-loading-overlay.is-loading {
        display: block;
    }


.loading-spinner-container {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -30px;
    margin-top: -30px;
    background-color: rgba(1, 1, 1, .2);
    border-radius: 4px;
}
/* Simple loading spinner */
@keyframes loading-spinner {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes loading-spinner {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.loading-spinner {
    position: relative;
}

    .loading-spinner div {
        left: 94px;
        top: 48px;
        position: absolute;
        -webkit-animation: loading-spinner linear 1s infinite;
        animation: loading-spinner linear 1s infinite;
        background: #870aa0;
        width: 12px;
        height: 24px;
        border-radius: 40%;
        -webkit-transform-origin: 6px 52px;
        transform-origin: 6px 52px;
    }

        .loading-spinner div:nth-child(1) {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-animation-delay: -0.888888888888889s;
            animation-delay: -0.888888888888889s;
        }

        .loading-spinner div:nth-child(2) {
            -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
            -webkit-animation-delay: -0.777777777777778s;
            animation-delay: -0.777777777777778s;
        }

        .loading-spinner div:nth-child(3) {
            -webkit-transform: rotate(80deg);
            transform: rotate(80deg);
            -webkit-animation-delay: -0.666666666666667s;
            animation-delay: -0.666666666666667s;
        }

        .loading-spinner div:nth-child(4) {
            -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
            -webkit-animation-delay: -0.555555555555556s;
            animation-delay: -0.555555555555556s;
        }

        .loading-spinner div:nth-child(5) {
            -webkit-transform: rotate(160deg);
            transform: rotate(160deg);
            -webkit-animation-delay: -0.444444444444444s;
            animation-delay: -0.444444444444444s;
        }

        .loading-spinner div:nth-child(6) {
            -webkit-transform: rotate(200deg);
            transform: rotate(200deg);
            -webkit-animation-delay: -0.333333333333333s;
            animation-delay: -0.333333333333333s;
        }

        .loading-spinner div:nth-child(7) {
            -webkit-transform: rotate(240deg);
            transform: rotate(240deg);
            -webkit-animation-delay: -0.222222222222222s;
            animation-delay: -0.222222222222222s;
        }

        .loading-spinner div:nth-child(8) {
            -webkit-transform: rotate(280deg);
            transform: rotate(280deg);
            -webkit-animation-delay: -0.111111111111111s;
            animation-delay: -0.111111111111111s;
        }

        .loading-spinner div:nth-child(9) {
            -webkit-transform: rotate(320deg);
            transform: rotate(320deg);
            -webkit-animation-delay: 0s;
            animation-delay: 0s;
        }

.loading-spinner {
    width: 60px !important;
    height: 60px !important;
    -webkit-transform: translate(-30px, -30px) scale(0.3) translate(30px, 30px);
    transform: translate(-30px, -30px) scale(0.3) translate(30px, 30px);
}

.read-only-field {
    padding: 4px;
    border: 1px dashed lightgray;
    background-color: #fdfdfd;
}

body.blur-sensitive-data .sensitive-data {
    filter: blur(4px) !important;
}
body.blur-sensitive-data .profile-picture {
    filter: blur(12px) !important;
}

.nav-dropdown-checkbox {
    font-weight: normal;
    line-height: 1.42857143;
    color: #eee;
    white-space: nowrap;
    cursor: pointer;
}