/*This is the form-group.has-error style update*/
.form-group.has-error .form-control {
    border-color: #843534;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #ce8483;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #ce8483;
}
/* These are the styles for the asp-validation-for span*/
span.field-validation-error {
    display: block;
    color: #a94442;
    margin-top: 10px;
}
/* This styles the rsizable textarea */
textarea.resizeable {
    resize: none;
    overflow-y: hidden;
}

/* This styles the span for attachment input */
.attachment-span {
    font-weight: 100;
    cursor: pointer;
    height: auto;
    min-height: 34px;
    padding: 0 12px 0 12px;
}

    /* This is the container for every attachment*/
    .attachment-span .file-container {
        display: flex;
        margin: 4px;
        padding: 4px;
        box-shadow: 0 0 4px 2px rgba(0,0,0,0.2);
        transition: 0.3s;
        border-radius: 10px;
    }

        /* This adds the hover effect of increasing the box-shadow*/
        .attachment-span .file-container:hover {
            box-shadow: 0 0 4px 4px rgba(0,0,0,0.2);
        }

        .attachment-span .file-container em {
            display: inline-block;
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    /* This styles the placeholder text inside the spans */
    .attachment-span .placeholder-text {
        line-height: 34px;
        word-break: break-all;
        color: #999;
        user-select: none;
        -ms-user-select: none;
    }

/* This styles the multiple sources file input */
.multiple-file-container .input-group {
    width: 50%;
    float: left;
    padding: 2px;
}

    .multiple-file-container .input-group .btn-danger {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
/* These are the styles for the dropzone */
.form-group.dropzone {
    margin-top: 10px;
    position: relative;
    height: auto;
    border: 2px dashed #31708f;
    box-shadow: 0 0 0 10px #d9edf7;
    background-color: #d9edf7;
}

    .form-group.dropzone:hover {
    }

    .form-group.dropzone .box-content {
        text-align: center;
    }

        .form-group.dropzone .box-content svg path {
            fill: #31708f;
        }

    .form-group.dropzone label.box-text {
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 10px;
    }

.files-collection {
    min-height: 45px;
}
/* These are the styles for the dragged, dropped and the selected file*/
.attachment-group {
    box-shadow: 0 0 4px 2px rgba(0,0,0,0.2);
    border-radius: 50px;
    max-width: 169px;
    margin: 10px;
}

    .attachment-group .file-container {
    }

        .attachment-group .file-container .form-control {
            max-width: 135px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .attachment-group .file-container .input-group-addon {
            z-index: 2;
        }

/* These are the styles for the mini loader */
.mini-loader {
    border: 2px solid #ccc;
    border-radius: 50%;
    border-top: 2px solid #1b6ec2;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 0.5s linear infinite; /* Safari */
    animation: spin 0.5s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}
/* End mini loader styles */

.employee-search-container {
    position: relative;
}

.loader-container {
    position: absolute;
    top: 2px;
    right: 2px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .loader-container {
        right: -32px;
    }
}

/* This is the error spinner */
.loader-container.has-error .mini-loader {
    border-top: 2px solid #a94442;
}

/* These are the styles for the file buttons */
.btn.btn-danger.btn-file {
    background-color: #d9534f;
    border-color: #d43f3a;
    color: #fff;
}

    .btn.btn-danger.btn-file:hover {
        color: #fff;
        background-color: #c9302c;
        border-color: #ac2925
    }

.btn.btn-primary.btn-file {
    background-color: #1b6ec2;
    border-color: #2e6da4;
    color: #fff;
}

    .btn.btn-primary.btn-file:hover {
        color: #fff;
        background-color: #286090;
        border-color: #204d74
    }

/* This adds a width of 100% to the custom wrapped group*/
.wrapped-group {
    width: 100%;
}

/* These are the styles for the arrow */
.btn-help {
    margin-bottom: 10px;
}
/*This adds an arrow to the element*/
.help-bar::before {
    content: '';
    height: 0;
    position: absolute;
    width: 0;
    top: -20px;
    left: 10px;
    border: 10px solid transparent;
    border-bottom-color: #d9edf7;
}

/* This is the alert help bar for alertify */
.alert-danger.help-bar {
    position: relative;
    display: none;
}

    .alert-danger.help-bar::before {
        left: 50%;
        border-bottom-color: #ebccd1;
    }

/* These are the styles to make the help alert nice */
.alert-info.help-bar {
    border-color: #d9edf7;
}

/* These are the styles for the toggle switch */
.toggle-container.has-error {
    border-color: #843534;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #ce8483;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #ce8483;
}

.toggle-container .input-group-addon {
    padding: 0;
    border: 0;
    width: 0;
}

.toggle-container .btn.first {
    border-right: none;
}

.toggle-container .btn.second {
    border-left: none;
}
/* These are the styles for the different buttons */
.toggle-container .btn-success {
    background-color: #dff0d8;
    color: #3c763d;
}

.toggle-container .btn-info {
    background-color: #d9edf7;
    color: #31708f;
}

.toggle-container .btn-warning {
    background-color: #fcf8e3;
    color: #8a6d3b;
}

.toggle-container .btn-danger {
    background-color: #f2dede;
    color: #a94442;
}

.toggle-container .btn-primary {
    background-color: #76a4cc;
    color: #001e38;
}

.toggle-container .btn-default {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
/* End button styles */
/* These are the hover styles for the different buttons */
.toggle-container .btn-success:hover {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c
}

.toggle-container .btn-info:hover {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da
}

.toggle-container .btn-warning:hover {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236
}

.toggle-container .btn-danger:hover {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a
}

.toggle-container .btn-primary:hover {
    background-color: #1b6ec2;
    color: #fff;
}

.toggle-container .btn-default:hover {
    color: #333;
    background-color: #afafaf;
    border-color: #8c8c8c
}
/* End button hover styles*/

/* These are the focus styles for the different buttons */
.toggle-container .btn-success:focus {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(223, 240, 216,.075),0 0 12px rgba(76, 174, 76,.6);
    box-shadow: inset 0 1px 1px rgba(223, 240, 216,.075),0 0 12px rgba(76, 174, 76,.6);
}

.toggle-container .btn-info:focus {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(217, 237, 247,.075),0 0 12px rgba(70, 184, 218,.6);
    box-shadow: inset 0 1px 1px rgba(217, 237, 247,.075),0 0 12px rgba(70, 184, 218,.6);
}

.toggle-container .btn-warning:focus {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(252, 248, 227,.075),0 0 12px rgba(238, 162, 54,.6);
    box-shadow: inset 0 1px 1px rgba(252, 248, 227,.075),0 0 12px rgba(238, 162, 54,.6);
}

.toggle-container .btn-danger:focus {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(242, 222, 222,.075),0 0 12px rgba(212, 63, 58,.6);
    box-shadow: inset 0 1px 1px rgba(242, 222, 222,.075),0 0 12px rgba(212, 63, 58,.6);
}

.toggle-container .btn-primary:focus {
    background-color: #1b6ec2;
    color: #fff;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(242, 222, 222,.075),0 0 12px rgba(51, 122, 183,.6);
    box-shadow: inset 0 1px 1px rgba(242, 222, 222,.075),0 0 12px rgba(51, 122, 183,.6);
}

.toggle-container .btn-default:focus {
    color: #333;
    background-color: #afafaf;
    border-color: #8c8c8c;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(242, 222, 222,.075),0 0 12px rgba(109, 109, 109,.6);
    box-shadow: inset 0 1px 1px rgba(242, 222, 222,.075),0 0 12px rgba(109, 109, 109,.6);
}
/* End button focus styles*/

/* These are the styles for the different buttons */
.toggle-container .btn-success.active {
    color: #fff;
    background-color: #236623;
    border-color: #398439;
}

.toggle-container .btn-info.active {
    color: #fff;
    background-color: #11627a;
    border-color: #269abc;
}

.toggle-container .btn-warning.active {
    color: #fff;
    background-color: #a56408;
    border-color: #d58512;
}

.toggle-container .btn-danger.active {
    color: #fff;
    background-color: #961210;
    border-color: #ac2925;
}

.toggle-container .btn-primary.active {
    background-color: #184d7a;
    color: #fff;
}

.toggle-container .btn-default.active {
    background-color: #6d6d6d;
    color: #fff;
}
/* End button styles */

/* Styles for ui auto complete */
.ui-autocomplete {
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: scroll;
}

/* These are the styles for the error on the input */
/* The select search container is given relative position so that the arrow can be easily contained inside it. */
.select-search {
    position: relative;
}

    /* This remove the clear cross from the span*/
    .select-search span.form-control::-ms-clear {
        display: none;
    }

    /* Gave absolute postion to the the arrow */
    .select-search span.fa {
        position: absolute;
        right: 10px;
        top: 10px;
    }

/*Finish select seach combobox styles*/