* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

.bodyBlack {
    background-color: rgba(40, 70, 100, 1);
}

.report_date_start_input {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

.report_date_end_input {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

.input {
    outline: none;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    width: 100%;
    padding: 7px 10px;
    border: 2px solid rgba(40, 70, 100, 0.2);
}

.input:hover {
    border: 2px solid rgba(40, 70, 100, 0.5);
}

.input:focus {
    border: 2px solid rgba(40, 70, 100, 1);
}

.input2 {
    outline: none;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    width: 100%;
    padding: 5px 7px;
    border: 2px solid rgba(40, 70, 100, 0.2);
}

.input2:hover {
    border: 2px solid rgba(40, 70, 100, 0.5);
}

.input2:focus {
    border: 2px solid rgba(40, 70, 100, 1);
}

.inputReadonly {
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(40, 70, 100, 0.1);
}

.inputReadonly:hover {
    border: 2px solid rgba(40, 70, 100, 0.1);
}

.inputReadonly:focus {
    border: 2px solid rgba(40, 70, 100, 0.1);
}

.inputDateTask {
    width: 190px;
}

.report_date_start_input,
.report_date_end_input {
    width: auto;
}

.textarea {
    outline: none;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    width: 100%;
    resize: none;
    padding: 7px 10px;
    border-radius: 0px;
    border: 2px solid rgba(40, 70, 100, 0.2);
    vertical-align: top;
}

.textarea:hover {
    border: 2px solid rgba(40, 70, 100, 0.5);
}

.textarea:focus {
    border: 2px solid rgba(40, 70, 100, 1);
}

.select {
    outline: none;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    width: 100%;
    padding: 7px 5px;
    border: 2px solid rgba(40, 70, 100, 0.2);
}

.select:hover {
    border: 2px solid rgba(40, 70, 100, 0.5);
}

.select:focus {
    border: 2px solid rgba(40, 70, 100, 1);
}

.checkboxBlock {
    font-size: 0px;
}

.checkboxBlock input {
    display: none;
}

.checkboxBlock label {
    display: inline-block;
    min-width: 150px;
    text-align: center;
    position: relative;
    cursor: pointer;
    padding: 7px 10px;
    font-size: 14px;
    margin: 0 5px 0 0;
    user-select: none;
    border: 2px solid rgba(40, 70, 100, 0.2);
    background-color: rgba(255, 255, 255, 1);
}

.checkboxBlock label:hover {
    border: 2px solid rgba(40, 70, 100, 0.5);
}

.checkboxBlock input:checked+.label1 {
    background-color: rgba(0, 153, 68, 1);
    color: rgba(255, 255, 255, 1);
}

.checkboxBlock input:checked+.label2 {
    background-color: rgba(235, 150, 0, 1);
    color: rgba(255, 255, 255, 1);
}

.checkboxBlock input:checked+.label3 {
    background-color: rgba(230, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
}

.checkboxBlockStatus {
    font-size: 0px;
}

.checkboxBlockStatus input {
    display: none;
}

.checkboxBlockStatus label {
    display: inline-block;
    min-width: 150px;
    text-align: center;
    position: relative;
    cursor: pointer;
    padding: 7px 10px;
    font-size: 14px;
    margin: 0 5px 0 0;
    user-select: none;
    border: 2px solid rgba(40, 70, 100, 0.2);
    background-color: rgba(255, 255, 255, 1);
}

.checkboxBlockStatus .checkboxBlockStatusVerticalLine {
    display: inline-block;
    min-width: 30px;
    text-align: center;
    position: relative;
    cursor: pointer;
    padding: 7px 10px;
    font-size: 14px;
    margin: 0 5px 0 0;
    color: rgba(0, 0, 0, 0);
}

.checkboxBlockStatus label:hover {
    border: 2px solid rgba(40, 70, 100, 0.5);
}



.checkboxBlockStatus input:checked+.label1 {
    background-color: rgba(0, 100, 150, 1);
    color: rgba(255, 255, 255, 1);
}

.checkboxBlockStatus input:checked+.label2 {
    background-color: rgba(60, 150, 200, 1);
    color: rgba(255, 255, 255, 1);
}

.checkboxBlockStatus input:checked+.label3 {

    background-color: rgba(60, 150, 200, 1);
    color: rgba(255, 255, 255, 1);
}

.checkboxBlockStatus input:checked+.label4 {
    background-color: rgba(180, 200, 210, 1);
    color: rgba(40, 70, 100, 1);
}

.checkboxBlockStatus input:checked+.label5 {
    background-color: rgba(200, 150, 150, 1);
    color: rgba(255, 255, 255, 1);
}

.checkboxBlockAssignment {
    font-size: 0px;
}

.checkboxBlockAssignment input {
    display: none;
}

.checkboxBlockAssignment label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 7px 10px 7px 30px;
    font-size: 14px;
    margin: 0 5px 0 0;
    user-select: none;
    border: 2px solid rgba(40, 70, 100, 0.2);
    background-color: rgba(255, 255, 255, 1);
}

.checkboxBlockAssignment label:hover {
    border: 2px solid rgba(40, 70, 100, 0.5);
}

.checkboxBlockAssignment label::after {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    left: 3px;
    top: 3px;
    background: url(../images/check_box_unchecked.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto;
    opacity: 0.2;
}

.checkboxBlockAssignment input:checked+label {
    border: 2px solid rgba(40, 70, 100, 1);
    background-color: rgba(255, 255, 255, 1);
}

.checkboxBlockAssignment input:checked+label::after {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    left: 3px;
    top: 3px;
    background: url(../images/check_box_checked.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto;
    opacity: 1;
}

/*  */

.checkboxBlockSendMsg {
    font-size: 0px;
}

.checkboxBlockSendMsg input {
    display: none;
}

.checkboxBlockSendMsg label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 7px 10px 7px 30px;
    font-size: 14px;
    margin: 0 5px 0 0;
    user-select: none;
    border: 2px solid rgba(40, 70, 100, 0.2);
    background-color: rgba(255, 255, 255, 1);
}

.checkboxBlockSendMsg label:hover {
    border: 2px solid rgba(40, 70, 100, 0.5);
}

.checkboxBlockSendMsg label::after {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    left: 3px;
    top: 3px;
    background: url(../images/check_box_unchecked.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto;
    opacity: 0.2;
}

.checkboxBlockSendMsg input:checked+label {
    border: 2px solid rgba(40, 70, 100, 1);
    background-color: rgba(255, 255, 255, 1);
}

.checkboxBlockSendMsg input:checked+label::after {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    left: 3px;
    top: 3px;
    background: url(../images/check_box_checked.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto;
    opacity: 1;
}

/*  */
.checkboxPriority {
    font-size: 0px;
}

.checkboxPriority input {
    display: none;
}

.checkboxPriority label {
    display: inline-block;
    min-width: 40px;
    text-align: center;
    position: relative;
    cursor: pointer;
    padding: 7px 10px;
    font-size: 14px;
    margin: 0 5px 0 0;
    user-select: none;
    border: 2px solid rgba(40, 70, 100, 0.2);
    background-color: rgba(255, 255, 255, 1);
}

.checkboxPriority label:hover {
    border: 2px solid rgba(40, 70, 100, 0.5);
}

.checkboxPriority input:checked+label {
    background-color: rgba(60, 150, 200, 1);
    color: rgba(255, 255, 255, 1);
}

.checkboxPriority input:checked+.label1 {
    background-color: rgba(0, 153, 68, 0.7);
    color: rgba(255, 255, 255, 1);
}

.checkboxPriority input:checked+.label2 {
    background-color: rgba(0, 153, 68, 0.8);
    color: rgba(255, 255, 255, 1);
}

.checkboxPriority input:checked+.label3 {
    background-color: rgba(0, 153, 68, 0.9);
    color: rgba(255, 255, 255, 1);
}

.checkboxPriority input:checked+.label4 {
    background-color: rgba(0, 153, 68, 1);
    color: rgba(255, 255, 255, 1);
}

.checkboxPriority input:checked+.label5 {
    background-color: rgba(235, 150, 0, 0.7);
    color: rgba(255, 255, 255, 1);
}

.checkboxPriority input:checked+.label6 {
    background-color: rgba(235, 150, 0, 0.8);
    color: rgba(255, 255, 255, 1);
}

.checkboxPriority input:checked+.label7 {
    background-color: rgba(235, 150, 0, 0.9);
    color: rgba(255, 255, 255, 1);
}

.checkboxPriority input:checked+.label8 {
    background-color: rgba(235, 150, 0, 1);
    color: rgba(255, 255, 255, 1);
}

.checkboxPriority input:checked+.label9 {
    background-color: rgba(230, 0, 0, 0.9);
    color: rgba(255, 255, 255, 1);
}

.checkboxPriority input:checked+.label10 {
    background-color: rgba(230, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
}

.checkboxBlUsersGroup {
    font-size: 0px;
}

.checkboxBlUsersGroup input {
    display: none;
}

.checkboxBlUsersGroup label {
    display: inline-block;
    min-width: 150px;
    text-align: center;
    position: relative;
    cursor: pointer;
    padding: 7px 10px;
    font-size: 14px;
    margin: 0 2px 0 0;
    user-select: none;
    border: 2px solid rgba(40, 70, 100, 0.2);
    background-color: rgba(255, 255, 255, 1);
}

.checkboxBlUsersGroup label:hover {
    border: 2px solid rgba(40, 70, 100, 0.5);
}

.checkboxBlUsersGroup input:checked+label {
    background-color: rgba(40, 70, 100, 0.1);
    color: rgba(40, 70, 100, 1)
}


/* ********************************************************** */

.formReportsAssignUsersLabels {
    font-size: 0px;
}

.formReportsAssignUsersLabels input {
    display: none;
}

.formReportsAssignUsersLabels label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 7px 10px 7px 30px;
    font-size: 14px;
    margin: 0 5px 0 0;
    user-select: none;
    border: 2px solid rgba(40, 70, 100, 0.2);
    background-color: rgba(255, 255, 255, 1);
}

.formReportsAssignUsersLabels label:hover {
    border: 2px solid rgba(40, 70, 100, 0.5);
}

.formReportsAssignUsersLabels label::after {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    left: 3px;
    top: 3px;
    background: url(../images/check_box_unchecked.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto;
    opacity: 0.2;
}

.formReportsAssignUsersLabels input:checked+label {
    border: 2px solid rgba(40, 70, 100, 1);
    background-color: rgba(255, 255, 255, 1);
}

.formReportsAssignUsersLabels input:checked+label::after {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    left: 3px;
    top: 3px;
    background: url(../images/check_box_checked.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto;
    opacity: 1;
}

/* *********************************************************** */

.formReportsStatusLabels {
    font-size: 0px;
}

.formReportsStatusLabels input {
    display: none;
}

.formReportsStatusLabels label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 7px 10px 7px 30px;
    font-size: 14px;
    margin: 0 5px 0 0;
    min-width: 100px;
    user-select: none;
    border: 2px solid rgba(40, 70, 100, 0.2);
    background-color: rgba(255, 255, 255, 1);
}

.formReportsStatusLabels label:hover {
    border: 2px solid rgba(40, 70, 100, 0.5);
}

.formReportsStatusLabels label::after {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    left: 3px;
    top: 3px;
    background: url(../images/check_box_unchecked.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto;
    opacity: 0.2;
}

.formReportsStatusLabels input:checked+label {
    border: 2px solid rgba(40, 70, 100, 1);
    background-color: rgba(255, 255, 255, 1);
}

.formReportsStatusLabels input:checked+label::after {
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    left: 3px;
    top: 3px;
    background: url(../images/check_box_checked.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% auto;
    opacity: 1;
}


/* ********************************************************** */

@media screen and (max-width:500px) {
    .checkboxBlock label {
        display: block;
        width: 100%;
        margin: 0 0 2px 0;
    }

    .checkboxBlockStatus label {
        display: block;
        width: 100%;
        margin: 0 0 2px 0;
    }

    .checkboxBlockStatus .checkboxBlockStatusVerticalLine {
        display: block;
        width: 100%;
        margin: 0 0 2px 0;
    }

    .checkboxBlockAssignment label {
        display: block;
        width: 100%;
        margin: 0 0 2px 0;
    }

    .formReportsAssignUsers label {
        display: block;
        width: 100%;
        margin: 0 0 2px 0;
    }
}

img {
    max-width: 100%;
    height: auto;
}

h1 {
    margin: 0 0;
    padding: 0 0 20px 0;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
    transition: padding 0.2s ease-in-out;
}


/* @media screen and (max-width:500px) {
	h1 {
		padding: 0 0 20px 20px;
	}
} */

.alignleft {
    text-align: left;
}

.alignright {
    text-align: right;
}

.aligncenter {
    text-align: center;
}

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

    100% {
        opacity: 1;
    }
}

.errorLogin {
    color: rgba(250, 0, 0, 1);
    opacity: 1;
    animation: errorLoginShow 1s ease-in-out;
}


/* ********************************************************** */

.loginBlockOuter {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    overflow: hidden;
}

.loginBlock {
    width: 400px;
    max-width: calc(100% - 20px);
    margin: 50px auto 0 auto;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.5);
    padding: 20px 20px;
    background-color: rgba(233, 236, 239, 1);
}

.loginBlock h1 {
    font-size: 20px;
    padding: 0 0 15px 0;
    margin: 0;
}

@media screen and (max-width:400px) {
    .loginBlock h1 {
        font-size: 18px;
    }
}

@media screen and (max-width:360px) {
    .loginBlock h1 {
        font-size: 16px;
    }
}

@media screen and (max-width:320px) {
    .loginBlock h1 {
        font-size: 14px;
    }
}

.loginBlockLine {
    display: block;
    width: 100%;
    margin: 0 0 10px 0;
}

.loginBlockLine input {
    outline: none;
    border: 2px solid rgba(40, 70, 100, 0.2);
    padding: 7px 10px;
    width: 100%;
}

.loginBlockLine input:hover {
    border: 2px solid rgba(40, 70, 100, 0.5);
}

.loginBlockLine input:focus {
    border: 2px solid rgba(40, 70, 100, 1);
}


/* ********************************************************** */

.contentPageOuter {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    overflow: hidden;
}

.contentPage {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

.contentPageBlock1 {
    float: left;
    background-color: rgba(40, 70, 100, 1);
    color: rgba(255, 255, 255, 1);
    width: 300px;
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: width 0.2s ease-in-out;
}

.contentPageBlock2 {
    float: left;
    background-color: rgba(40, 70, 100, 0.07);
    width: calc(100% - 300px);
    height: 100%;
    transition: width 0.2s ease-in-out;
    overflow: scroll;
    position: relative;
}

.leftBlock1 {
    width: 300px;
    padding: 20px 20px 20px 60px;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 1;
    position: relative;
    transition: opacity 0.2s ease-in-out;
}

.leftBlock2 {
    width: 300px;
    padding: 0px 0px 20px 0px;
}

.userinfo {
    display: block;
    width: 100%;
    font-size: 16px;
    padding: 16px 20px 16px 60px;
    margin: 0 0 0 0;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.0);
    color: rgba(255, 255, 255, 1);
    user-select: none;
    position: relative;
    transition: background-color 0.2s ease-in-out, background-position 0.25s ease-in-out, color 0.2s ease-in-out;
}

.userImage {
    position: absolute;
    left: 17px;
    top: 50%;
    margin: -15px 0 0 0;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    line-height: 30px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 1);
    color: rgba(40, 70, 100, 1);
    transition: left 0.25s ease-in-out;
}

.userName {
    color: rgba(255, 255, 255, 1);
    transition: color 0.2s ease-in-out;
    white-space: nowrap;
}

.userLoagout {
    position: absolute;
    display: block;
    right: -50px;
    top: 11px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 1);
    background-color: rgba(40, 70, 100, 1);
    background-image: url(../images/arrow_forward_white.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 24px auto;
    opacity: 0.3;
    transition: right 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.userLoagout:hover {
    opacity: 0.8;
}

.userinfo:hover .userLoagout {
    right: 10px;
}

.contentPageBlock1Min .userLoagout {
    right: auto;
    left: -50px;
    border-radius: 15px;
    transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.contentPageBlock1Min .userinfo:hover .userLoagout {
    right: auto;
    left: 10px;
}

.buttonLeft {
    display: block;
    width: 100%;
    font-size: 12px;
    padding: 16px 20px 16px 60px;
    margin: 0 0 0 0;
    text-transform: uppercase;
    background-color: rgba(255, 255, 255, 0.0);
    background-image: url(../images/stars-white.svg);
    background-repeat: no-repeat;
    background-size: 24px auto;
    background-position: 20px 50%;
    user-select: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, background-position 0.25s ease-in-out, color 0.2s ease-in-out;
}

.buttonLeft:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.buttonLeftActive {
    position: relative;
    background-color: rgba(255, 255, 255, 0.2);
}


/* .buttonLeftActive::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	margin: -5px 0 0 0;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.8);
} */

.buttonTasks {
    background-image: url(../images/wysiwyg-white.svg);
}

.buttonReports {
    background-image: url(../images/equalizer-white.svg);
}

.buttonUsers {
    background-image: url(../images/person-white-24dp.svg);
}

.contentPageBlock1Hide {
    position: absolute;
    outline: none;
    left: 250px;
    top: 17px;
    width: 30px;
    height: 30px;
    border-radius: 0px;
    border: 2px solid rgba(255, 255, 255, .8);
    background-color: rgba(40, 70, 100, 1);
    background-image: url(../images/arrow_left_white.svg);
    background-repeat: no-repeat;
    background-size: 30px auto;
    background-position: 50% 50%;
    cursor: pointer;
    user-select: none;
    opacity: 0.3;
    transform: rotate(0deg);
    transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out, left 0.2s ease-in-out;
}

.contentPageBlock1Hide:hover {
    background-color: rgba(40, 70, 100, 1);
    opacity: 0.9;
}

.contentPageBlock1Hide:active {
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: background-color 0.2s ease-in-out, opacity 0s ease-in-out, left 0.2s ease-in-out;
}

.contentPageBlock1HideRevers {
    transform: rotate(180deg);
    left: 10px;
    transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out, left 0.2s ease-in-out;
}

.contentPageBlock1Min {
    width: 50px;
}

.contentPageBlock1Min .buttonLeft {
    background-position: 12px 50%;
    color: rgba(255, 255, 255, 0.0);
}

.contentPageBlock1Min .userinfo .userName {
    background-position: 10px 50%;
    color: rgba(255, 255, 255, 0.0);
}

.contentPageBlock1Min .userImage {
    left: 10px;
}

.contentPageBlock1Min .leftBlock1 {
    opacity: 0;
}

.contentPageBlock2Min {
    width: calc(100% - 50px);
}

.opacity0 {
    opacity: 0;
}

.color0 {
    color: rgba(255, 255, 255, 0.0);
}


/* @media screen and (max-width:500px) {
	.contentPageBlock1Min {
		width: 1px;
	}

	.contentPageBlock2Min {
		width: calc(100% - 1px);
	}

	.contentPageBlock1HideRevers {
		transform: rotate(180deg);
		left: 0px;
		border-radius: 0;

		border: 2px solid rgba(40, 70, 100, 1);
		transition: left 0.2s ease-in-out;
		background-position: 50% 50%;
	}

	.contentPageBlock1HideRevers:hover {}

	.contentPageBlock1HideRevers:active {
		opacity: 1;
	}

} */


/* ********************************************************** */

.contentBlockOuter {
    padding: 0px 0px;
    min-width: 900px;
    height: 100%;
}

.contentHeadBlock {
    padding: 20px 20px;
    background-color: #ffffff;
}

.contentBlock {
    padding: 20px 20px;
}

@media screen and (max-width:600px) {
    .contentBlockOuter {
        padding: 0px 0px;
        min-width: 300px;
        height: 100%;
        margin: 0 0;
    }

    .contentBlock {
        padding: 10px 0px;
    }
}


/* ********************************************************** */

.all_tasks_div {
    width: 100%;
    margin: 0 0 0 0;
    font-size: 14px;
}

.all_tasks_div_drop {
    padding: 10px 0 0 0;
}

.task_div_head {
    width: 100%;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 0 0 0;
    color: rgba(40, 70, 100, 1);
    box-shadow: none !important;
    background-color: rgba(244, 245, 247, 0) !important;
    border-bottom: 2px solid rgba(40, 70, 100, 1);
    display: flex;
    flex-direction: row;
    align-items: bottom;
    align-items: flex-end;
    justify-content: left;
}

.task_div {
    background: rgba(255, 255, 255, 1);
    margin: 0 0 10px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.task_div:hover {
    box-shadow: 0 0 0 2px rgba(40, 70, 100, 0.5);
    /* background-color: rgba(244, 245, 247, 1); */
}

.task_div_td {
    padding: 7px 12px;
}

.task_div_td_id {
    width: 50px;
}

.task_div_td_date {
    width: 110px;
}

.task_div_td_title {
    width: calc(100% - 630px);
}

.task_div_td_priority {
    width: 160px;
}

.task_div_td_status {
    width: 160px;
}

.task_div_td_author {
    width: 150px;
}

.task_title {
    cursor: pointer;
    color: rgba(0, 100, 150, 1);
    text-decoration: none;
}

.task_title:hover {
    color: rgba(60, 150, 200, 1);
    text-decoration: underline;
}

.task_title:active {
    color: rgba(60, 150, 200, 1);
    text-decoration: none;
}

.mobiileText {
    display: none;
}

@media screen and (max-width:600px) {
    .mobiileText {
        display: inline-block;
        padding: 0 5px 0 0;
    }

    .task_title {
        font-size: 16px;
    }

    .task_div_head {
        display: none;
    }

    .task_div {
        background: rgba(255, 255, 255, 1);
        margin: 0 0 10px 0;
        padding: 5px 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .task_div_td {
        width: 100%;
        padding: 0 0 0 0;
        margin: 5px 0;
    }

    .task_div_td_id {
        width: 50%;
        font-weight: bold;
    }

    .task_div_td_date {
        width: 50%;
        text-align: right;
    }

    .task_div_td_priority,
    .task_div_td_status,
    .task_div_td_author {
        width: 100%;
    }

    .task_div_td_priority {
        width: 50%;
        padding: 0 5px 0 0;
    }

    .task_div_td_status {
        width: 50%;
        padding: 0 0 0 5px;
    }
}


/* ********************************************************** */


/* ********************************************************** */

.all_users_div {
    width: 100%;
    margin: 0 0 0 0;
    font-size: 14px;
}

.user_div_content {
    padding: 10px 0 0 0;
}

.user_div_head {
    width: 100%;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 0 0 0;
    color: rgba(40, 70, 100, 1);
    box-shadow: none !important;
    background-color: rgba(244, 245, 247, 0) !important;
    border-bottom: 2px solid rgba(40, 70, 100, 1);
    display: flex;
    flex-direction: row;
    align-items: bottom;
    align-items: flex-end;
    justify-content: left;
}

.user_div {
    background: rgba(255, 255, 255, 1);
    margin: 0 0 5px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.user_div_icon {
    position: absolute;
    left: 6px;
    top: 6px;
    width: 24px;
    height: 24px;
    line-height: 25px;
    text-align: center;
    background-color: rgba(40, 70, 100, 0.3);
    user-select: none;
}

.user_div_icon_group_1 {
    background-color: rgba(60, 150, 200, 1);
    color: rgba(255, 255, 255, 1);
}

.user_div_icon_group_2 {
    background-color: rgba(0, 153, 68, 1);
    color: rgba(255, 255, 255, 1);
}

.user_div:hover {
    box-shadow: 0 0 0 2px rgba(40, 70, 100, 0.5);
    /* background-color: rgba(244, 245, 247, 1); */
}

.user_div_td {
    padding: 10px 12px;
}

.user_div_td_title {
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    padding: 10px 12px 10px 40px;
}

.user_div_td_phone {
    width: 150px;
}

.user_div_td_email {
    width: calc(100% - 450px);
}

.user_title {
    cursor: pointer;
    color: rgba(0, 100, 150, 1);
    text-decoration: none;
}

.user_title:hover {
    color: rgba(60, 150, 200, 1);
    text-decoration: underline;
}

.user_title:active {
    color: rgba(60, 150, 200, 1);
    text-decoration: none;
}

@media screen and (max-width: 600px) {
    .user_div {
        flex-wrap: wrap;
        padding: 10px 10px;
        margin: 0 0 10px 0;
    }

    .user_div_td {
        width: 100%;
        padding: 5px 0px 5px 30px;
    }

    .user_div_head {
        display: none;
    }

    .user_div_icon {
        top: 10px;
        left: 10px;
    }

    .mobileNone {
        display: none;
    }
}


/* ********************************************************** */

.reports_assign_title {
    padding: 0px 0px 5px 5px;
}



.reports_assign_span_title {
    text-transform: uppercase;
    color: rgba(0, 100, 150, 1);
    font-weight: bold;
    font-size: 16px;
    display: inline-block;
    vertical-align: bottom;
}

.reports_assign_span_about {
    color: rgba(0, 0, 0, 0.7);
    display: inline-block;
    vertical-align: bottom;
    padding: 0 0 0 20px;
}

.reports_assign_span_about_num {
    color: rgba(0, 50, 100, 1);
    display: inline-block;
    vertical-align: bottom;
    padding: 0 0 0 5px;
    font-weight: bold;
    font-size: 16px;
}

.reports_assign_tasks {
    padding: 5px 0 20px 0;
}


@media screen and (max-width: 600px) {
    .reports_assign_title {
        margin: 10px 10px 10px 10px;
        padding: 0;
    }

    .reports_assign_title span {
        padding: 0 5px 0 0;
    }

    .reports_assign_span_title {
        display: block;
        width: 100%;
    }

    .reports_assign_tasks {
        padding: 5px 0 10px 0;
    }
}

.reports_div_head {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(40, 70, 100, 1);
    color: rgba(40, 70, 100, 1);
    font-weight: bold;
    font-size: 12px;
    min-width: 850px;
    position: relative;
}

.reports_div {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    background-color: rgba(255, 255, 255, 1);
    margin: 3px 0;
    min-width: 850px;
    position: relative;
}


@media screen and (max-width: 960px) {
    .reports_div_head {
        display: none;
        flex-wrap: unset;
        flex-direction: unset;
    }

    .reports_div {
        display: block;
        flex-wrap: unset;
        flex-direction: unset;
        margin: 10px 0;
        padding: 10px;
        min-width: auto;
        position: relative;
    }
}

.reports_div:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.task_cross {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0px;
    right: 0px;
    opacity: 0;
    background-image: url(../images/close-black.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 18px auto;
    background-color: rgba(40, 70, 100, 0);
    visibility: hidden;
    transition: opacity 0.1s ease-in-out;
    cursor: pointer;
    transform: scale(1);
}

.reports_div:hover .task_cross {
    visibility: visible;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
}

.task_cross:hover {
    background-color: rgba(40, 70, 100, 0.3);
}

.task_cross:active {
    transform: scale(0.9);
    opacity: 1;
    background-color: rgba(40, 70, 100, 0.3);
}

.reports_td {
    padding: 3px 5px;
}

.reports_td_id {
    width: 50px;
    text-align: center;
}

.reports_td_date1 {
    width: 130px;
}

.reports_td_date2 {
    width: 130px;
}

.reports_td_date3 {
    width: 90px;
}

.reports_td_title {
    width: calc(100% - 900px);
    overflow: hidden;
    white-space: nowrap;
}

.reports_td_priority_type {
    width: 150px;
}

.reports_td_status {
    width: 130px;
}

.reports_td_author {
    overflow: hidden;
    white-space: nowrap;
}

@media screen and (max-width: 600px) {
    .reports_div_head {
        opacity: 1;
    }

    .reports_td_date1 {
        position: relative;
    }

    .reports_td_date2 {
        position: relative;
    }

    .reports_td_date3 {
        position: relative;
    }

    .reports_td_date1::after {
        position: absolute;
        left: 115px;
        bottom: 3px;
        font-size: 10px;
        text-transform: uppercase;
        color: #a6b2be;
        content: "Дата создания"
    }

    .reports_td_date2::after {
        position: absolute;
        left: 115px;
        bottom: 3px;
        font-size: 10px;
        text-transform: uppercase;
        color: #a6b2be;
        content: "Дата завершения"
    }

    .reports_td_date3::after {
        position: absolute;
        left: 115px;
        bottom: 3px;
        font-size: 10px;
        text-transform: uppercase;
        color: #a6b2be;
        content: "Планируемая дата"
    }
}

.reports_span_title {
    color: rgba(40, 130, 180, 1);
    cursor: pointer;
}

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

.reports_span_priority_type_1 {
    color: rgba(0, 153, 68, 1);
}

.reports_span_priority_type_3 {
    color: rgba(230, 0, 0, 1);
}

.reports_span_priority_type_2 {
    color: rgba(235, 150, 0, 1);
}

.reports_span_status_1 {
    color: rgba(0, 100, 150, 1);
}

.reports_span_status_2 {
    color: rgba(60, 150, 200, 1);
}

.reports_span_status_3 {
    color: rgba(60, 150, 200, 1);
}

.reports_span_status_4 {
    color: rgba(180, 200, 210, 1);
}

.reports_span_status_5 {
    color: rgba(200, 150, 150, 1);
}

.reports_span_time_start {
    color: rgba(40, 70, 100, 0.7);
}

@media screen and (max-width: 600px) {
    .reports_td {
        padding: 0;
    }

    .reports_td_priority_type {
        text-transform: uppercase;
        font-weight: bold;
        font-size: 12px;
    }
}


/* ********************************************************** */

.loaderOuter {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: #eff2f4;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    z-index: 1;
}

.loaderOuter2 {
    background-color: rgba(40, 70, 100, 0.1);
}

.loaderOuterHide {
    opacity: 0;
}

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

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

.loaderObj1 {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;
    background: none;
    overflow: hidden;
    border-radius: 50%;
    border-left: 3px solid rgba(40, 70, 100, 1);
    border-right: 3px solid rgba(40, 70, 100, 1);
    border-top: 3px solid rgba(255, 255, 255, 0);
    border-bottom: 3px solid rgba(255, 255, 255, 0);
    animation: loader1 1s linear infinite;
}

.loaderObj2 {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -20px;
    background: none;
    overflow: hidden;
    border-radius: 50%;
    border-left: 3px solid rgba(40, 70, 100, 1);
    border-right: 3px solid rgba(40, 70, 100, 1);
    border-top: 3px solid rgba(255, 255, 255, 0);
    border-bottom: 3px solid rgba(255, 255, 255, 0);
    animation: loader1 1.5s linear infinite;
}

.loaderObj3 {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    background: none;
    overflow: hidden;
    border-radius: 50%;
    border-left: 3px solid rgba(40, 70, 100, 1);
    border-right: 3px solid rgba(40, 70, 100, 1);
    border-top: 3px solid rgba(255, 255, 255, 0);
    border-bottom: 3px solid rgba(255, 255, 255, 0);
    animation: loader1 1s linear infinite;
}


/* ********************************************************** */

@keyframes blockFullPageShow {
    0% {
        opacity: 0;
        transform: scale(0.98);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.outerFullPage {
    position: fixed;
    overflow-x: hidden;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 14px;
    background-color: rgba(40, 70, 100, 0.7);
    z-index: 10;
}

.blockFullPage {
    display: block;
    margin: 20px auto 0px auto;
    width: 1100px;
    max-width: 100%;
    min-height: 300px;
    background-color: rgba(233, 236, 239, 1);
    opacity: 1;
    border: 1px solid rgba(40, 70, 100, 1);
    box-shadow: 0 5px 20px 1px rgba(40, 70, 100, 0.5);
    transform: scale(1);
    position: relative;
    padding: 15px 20px;
    transform: scale(1);
    animation: blockFullPageShow 0.2s linear;
}

@media screen and (max-width:900px) {
    .blockFullPage {
        display: block;
        margin: 10px auto;
        width: calc(100% - 14px);
    }
}

.blockFullPageCross {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 36px;
    height: 36px;
    background-image: url(../images/close-black.svg);
    background-position: 50% 50%;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: 0.5;
    transform: scale(1);
}

.blockFullPageCross:hover {
    opacity: 1;
    transform: scale(1.1);
}

.blockFullPageCross:active {
    opacity: 1;
    transform: scale(1);
}

.contentFullPageTitle {
    font-size: 20px;
    font-weight: 500;
    color: rgba(40, 70, 100, 1);
    padding: 0 0 0 150px;
}

@media screen and (max-width:600px) {
    .contentFullPageTitle {
        padding: 0 20px 0 0px;
    }
}

.taskauthorname {
    display: block;
    padding: 7px 10px 7px 10px;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(40, 70, 100, 0.1);
}

.contentFullPageLine {
    margin: 10px 0;
    padding: 0 0;
}

.contentFullPageButtons {
    font-size: 0px;
    padding: 10px 0 0 150px;
}

.contentFullPageLineLeft {
    float: left;
    width: 150px;
    padding: 11px 10px 9px 0px;
    text-align: right;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(40, 70, 100, 0.8);
}

.contentFullPageLineRight {
    float: left;
    width: calc(100% - 150px);
}

@media screen and (max-width:600px) {
    .contentFullPageButtons {
        font-size: 0px;
        padding: 20px 0 0 0px;
    }

    .contentFullPageLineLeft {
        float: none;
        width: 100%;
        padding: 7px 10px 7px 0px;
        text-align: left;
    }

    .contentFullPageLineRight {
        float: left;
        width: 100%;
    }
}

.fileDownloadBlock input {
    display: none;
}

.fileDownloadBlock label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 7px 10px;
    background-color: rgba(60, 150, 200, 1);
    border: 2px solid rgba(40, 70, 100, 0.2);
    color: rgba(255, 255, 255, 1);
    opacity: 1;
    user-select: none;
}

.fileDownloadBlock label:hover {
    border: 2px solid rgba(40, 70, 100, 0.5);
}

.fileDownloadBlock label:active {
    background-color: rgba(40, 70, 100, 1);
}

@media screen and (max-width:500px) {
    .fileDownloadBlock label {
        display: block;
        width: 100%;
    }
}


/* ********************************************************** */

.upload_div {
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0 10px 10px 0;
}

.uploadLink {
    display: block;
    padding: 10px 10px;
    background-color: rgba(255, 255, 255, 1);
    border: 2px solid rgba(40, 70, 100, 0.2);
    text-decoration: none;
    color: rgba(60, 150, 200, 1);
}

.uploadLink:hover {
    border: 2px solid rgba(40, 70, 100, 0.5);
}

.uploadLinkImage {
    width: 100px;
    height: 50px;
    overflow: hidden;
    padding: 0 0;
}

.uploadLinkImage img {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.upload_div_cross {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: rgba(255, 255, 255, 1);
    top: -5px;
    right: -5px;
    border-radius: 10px;
    background-image: url(../images/close-black.svg);
    background-position: 50% 50%;
    background-size: 16px 16px;
    box-shadow: -1px 1px 1px 0 rgba(40, 70, 100, 0.2);
    background-repeat: no-repeat;
    cursor: pointer;
    transform: scale(1);
    opacity: 0;
}

.upload_div:hover .upload_div_cross {
    opacity: 0.7;
}

.upload_div_cross:hover {
    transform: scale(1.1);
    opacity: 1 !important;
}

.upload_div_cross:active {
    transform: scale(1);
    opacity: 1 !important;
}

@media screen and (max-width:600px) {
    .upload_div_cross {
        opacity: 0.7;
    }
}


/* ********************************************************** */

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

    70% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.chatButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-image: url(images/chat-white-24px.svg);
    background-repeat: no-repeat;
    background-size: 55% auto;
    background-position: 50% 60%;
    background-color: rgba(0, 153, 68, 1);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
    opacity: 1;
    transform: scale(1);
    cursor: pointer;
    transition: bottom 0.25s ease-in-out, transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    animation: chatButtonShow 0.5s ease-in-out;
}

.chatButton:hover {
    transform: scale(1.1);
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.2);
}

.chatButton:active {
    transform: scale(1);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
}

@keyframes chatButtonShine1Up {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(5);
        opacity: 0;
    }
}

.chatButtonShine1 {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0, 153, 68, 1);
    transform: scale(1);
    opacity: 1;
    animation: chatButtonShine1Up 0.5s ease-in-out;
}

.chatButtonShine2 {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0, 153, 68, 1);
    transform: scale(1);
    opacity: 1;
    animation: chatButtonShine1Up 0.8s ease-in-out;
}

.chatButtonShine3 {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0, 153, 68, 1);
    transform: scale(1);
    opacity: 1;
    animation: chatButtonShine1Up 1.2s ease-in-out;
}

.chatContent {
    position: fixed;
    bottom: 18px;
    right: 18px;
    width: 300px;
    height: 500px;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0);
    background-color: rgba(255, 255, 255, 0);
    transition: border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.chatContentShadow {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2);
}

@keyframes chatContentBgShow {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes chatContentBgHide {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    99% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.chatContentBg {
    position: absolute;
    bottom: -575px;
    right: -575px;
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    background-color: rgba(243, 246, 249, 1);
    transform: scale(1);
    opacity: 1;
    animation: chatContentBgShow 0.4s ease-in-out;
}

.chatContentBgHide {
    opacity: 0;
    animation: chatContentBgHide 0.4s ease-in-out;
}

@keyframes chatContentContentShow {
    0% {
        padding: 500px 0 0 0;
    }

    50% {
        padding: 500px 0 0 0;
    }

    100% {
        padding: 0 0 0 0;
    }
}

.chatContentContent {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 0 0 0;
    overflow-x: hidden;
    overflow-y: hidden;
    animation: chatContentContentShow 0.3s ease-in-out;
}

.chatContentContentShadow {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.chatContentContentInner {
    padding: 20px 20px;
    position: relative;
}

.chatContentContentCross {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-image: url(images/close-black.svg);
    background-repeat: no-repeat;
    background-size: 80% auto;
    background-position: 50% 50%;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out, background 0.2s ease-in-out;
}

.chatContentContentCross:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
}


/* ********************************************************** */


/* ********************************************************** */


/* ********************************************************** */


/* ********************************************************** */


/* ********************************************************** */


/* ********************************************************** */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-button {
    background-color: rgba(40, 70, 100, 0);
    height: 10px;
}

::-webkit-scrollbar-track {
    background-color: rgba(40, 70, 100, 1);
}

::-webkit-scrollbar-track-piece {
    background-color: #f0f2f4;
}

::-webkit-scrollbar-thumb {
    height: 0px;
    background-color: rgba(40, 70, 100, 0.6);
}

::-webkit-scrollbar-corner {
    background-color: rgba(40, 70, 100, 0.2);
}


}

::-webkit-resizer {
    background-color: rgba(40, 70, 100, 1);
}

.outerFullPage::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

@media screen and (max-width:1080px) {
    ::-webkit-scrollbar {
        width: 0px;
        height: 10px;
    }
}

/* ********************************************************** */
.button {
    display: inline-block;
    outline: none;
    background-color: rgba(40, 70, 100, 1);
    color: rgba(255, 255, 255, 1);
    border: 2px solid rgba(176, 193, 211, 1) !important;
    padding: 9px 10px;
    min-width: 150px;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    user-select: none;
    cursor: pointer;
    margin: 0 15px 0 0;
}

.button:hover {
    border: 2px solid rgba(40, 70, 100, 1) !important;
}

.button:active {
    background-color: rgba(0, 20, 50, 1);
    border: 2px solid rgba(40, 70, 100, 1) !important;
}

@media screen and (max-width:500px) {
    .buttonTask {
        display: inline-block;
        width: calc(50% - 5px);
        margin: 0 0 0 0;
    }

    .buttonTask:nth-child(2n) {
        margin: 0 0 0 10px;
    }

    .buttonUser {
        display: inline-block;
        width: calc(50% - 5px);
        margin: 0 0 0 0;
    }

    .buttonUser:nth-child(2n) {
        margin: 0 0 0 10px;
    }
}

/* ********************************************************** */
.addNewUserButton {
    background-color: seagreen;
}

.addNewTaskButton {
    background-color: seagreen;
}

.reportFormSubmit {
    background-color: seagreen;
}

/* ********************************************************** */
.td_priority_type {
    display: block;
    background-color: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 1);
    padding: 10px 10px;
    white-space: nowrap;
}

.td_priority_type_1 {
    background-color: rgba(0, 153, 68, 1);
}

.td_priority_type_2 {
    background-color: rgba(235, 150, 0, 1);
}

.td_priority_type_3 {
    background-color: rgba(230, 0, 0, 1);
}

.td_status {
    display: block;
    background-color: rgba(60, 150, 200, 1);
    color: rgba(255, 255, 255, 1);
    padding: 10px 10px;
    white-space: nowrap;
}

.td_status_1 {
    background-color: rgba(0, 100, 150, 1);
}

.td_status_2 {
    background-color: rgba(60, 150, 200, 1);
}

.td_status_3 {
    background-color: rgba(100, 120, 130, 1);
    color: rgba(255, 255, 255, 1);
}

.td_status_4 {
    background-color: rgba(180, 200, 210, 1);
    color: rgba(40, 70, 100, 1);
}

.td_date_time {
    color: rgba(40, 70, 100, 0.8);
    display: block;
}

@media screen and (max-width:600px) {
    .td_date_time {
        color: rgba(0, 0, 0, 1);
        display: inline-block;
        padding: 0 0 0 10px;
    }

    .td_priority_type {
        padding: 5px 7px;
    }

    .td_status {
        padding: 5px 7px;
    }
}

/* ********************************************************** */
@keyframes buttonAnim {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

.buttonSendData {
    position: relative;
    animation: buttonAnim 1s linear infinite;
    opacity: 1;
}

/* ********************************************************** */
.msgInfo {
    position: fixed;
    width: 300px;
    width: 100%;
    overflow: hidden;
    top: -300px;
    left: 0px;
    max-height: 300px;
    padding: 10px 10px;
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 3px 0 rgba(40, 70, 100, 0.1);
    color: rgba(60, 150, 200, 1);
    animation: msgInfoShow 3s ease-in-out;
    font-weight: bold;
    z-index: 1000;
    text-align: left;
    transition: top 0.5s ease-in-out;
}

.msgInfoShow {
    top: 0px;
    transition: top 0.5s ease-in-out;
}

/* ********************************************************** */
.errors {
    color: rgba(230, 0, 0, 1);
}

/* ********************************************************** */
.changePassword {
    display: inline-block;
    min-width: 150px;
    text-align: center;
    position: relative;
    cursor: pointer;
    padding: 7px 10px;
    font-size: 14px;
    margin: 0 2px 0 0;
    user-select: none;
    border: 2px solid rgba(40, 70, 100, 0.2);
    background-color: rgba(60, 150, 200, 1);
    color: rgba(255, 255, 255, 1);
}

.changePassword:hover {
    border: 2px solid rgba(40, 70, 100, 0.5);
    background-color: rgba(60, 150, 200, 0.8);
}

.changePassword:active {
    border: 2px solid rgba(40, 70, 100, 1);
    background-color: rgba(60, 150, 200, 1);
}

/* ********************************************************** */
.blockBg1 {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 100%;
    background-color: rgba(40, 70, 100, 1);
}

.blockBg2 {
    position: absolute;
    right: 30px;
    top: 0;
    width: 20px;
    height: 100%;
    background-color: rgba(40, 70, 100, 1);
    background: linear-gradient(90deg, rgba(40, 70, 100, 0), rgba(40, 70, 100, 1));
}

/* ********************************************************** */
.formReportsBLocksLine {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 15px 0 0 0;
}

.formReportsBLocksLine1 {
    padding: 0 0 0 0;
}

.formReportsBLocksLineButtons {
    padding: 20px 0 0 0;
}

@media screen and (max-width: 600px) {

    .formReportsBLocksLineButtons .button {
        width: 100%;
        margin: 5px 0 0 0;
    }


    .formReportsStatus .formReportsStatusLabels {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .formReportsStatusLabels label {
        width: calc(50% - 3px);
        margin: 6px 0 0 0;
    }

    .contentHeadBlock {
        padding: 10px 10px;
        box-sizing: border-box;
    }
}

.formReportsBLock1 {
    padding: 0 10px 0 0;
}

.dateTimeBlock {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 305px;
    max-width: 100%;
}

.formReportsInBLockLineText {
    font-size: 12px;
    text-transform: uppercase;
    padding: 0 0 5px 10px;
}

.dateTimeBlockCol {
    width: 150px;
}

.dateTimeBlockCol input {
    width: 100%;
}

@media screen and (max-width: 1200px) {
    .formReportsBLocksLine {
        display: block;
        flex-direction: unset;
        flex-wrap: unset;
    }

    .report_date_start_input {
        width: 50%;
        margin: ;
    }

    .report_date_end_input {
        width: 50%;
    }

    .formReportsBLock1 {
        margin: 0 0 20px 0;
    }

    .reports_td {
        width: 100% !important;
        text-align: left !important;
    }
}

@media screen and (max-width: 600px) {
    .formReportsBLock1 {
        padding: 0 0;
    }

    .formReportsBLocksLine {
        padding: 0 0;
    }
}

/* ********************************************************** */

/* ********************************************************** */

/* ********************************************************** */

/* ********************************************************** */

/* ********************************************************** */
#form_user_settings {
    overflow: hidden;
    width: 100%;
    height: 0px;
    margin: 0 0;
    padding: 0 0;
}

.none_group_0 {
    display: none;
}

.none_group_2 {
    display: none;
}

.line1 {
    width: 100%;
    height: 2px;
    margin: 8px 0 0 0;
    background-color: rgba(40, 70, 100, 0.1);
}

.clear {
    clear: both;
}

.none {
    display: none;
}