@import "../font";
.title-cab {
    color: #333333;
    font-family: @fontLight;
    font-size: 32px;
    display: inline-block;
    margin: 40px 0;
}
section.cab-head,
.cab-head{
    background: none;
}
.CabinetHeader.all-header {
    padding: 0;
    background-color: @white;
    background-image: url(/Content/themes/allProjectsBg.png);
    position: relative;

    .all-header-color {
        opacity: .81;
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #4BA3D5;
    }

    .root-header-info {
        max-width: 1166px;
        margin: 0 auto;
        padding-top: 40px;
        width: 100%;
        height: 200px;
        z-index: 1;

        .leftHeadBlock {
            width: 100%;

            .cabName {
                img {
                    margin-right: 20px;
                    outline: none;
                    width: 40px;
                    height: 40px;
                    cursor: pointer;
                    display: none;
                }
            }
        }

        h1 {
            margin-right: 20px;
            line-height: 50px;
            font-size: 50px;
            margin: 0;
        }

        .userHeader {
            img {
                width: 50px;
                height: 50px;
                margin-right: 20px;
            }

            div {
                padding-top: 5px;
                padding-bottom: 5px;
                margin-right: 20px;

                div {
                    line-height: 18px;
                    font-size: 18px;
                    margin: 0;
                    color: @white;
                    font-family: @fontBold;
                    padding-top: 1px;
                    padding-bottom: 1px;
                }
            }
        }
    }
}

section.CabinetSection {
    height: calc(~"100% - 200px");

    .root-content {
        padding-bottom: 60px;
        width: 100%;

        .container {
            max-width: 1166px;
            width: 100%;
            padding: 0 15px 0 15px;

            .shadow-project {
                margin-bottom: 20px;
                background: none;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
                padding: 0;
                align-items: flex-start;

                .page-menu {
                    //background-color: rgba(77, 118, 179, 0.66);
                    background-color: #ffffff;
                    padding: 2px 0;

                    > div {
                        padding: 15px 35px;
                        color: #333;
                        font-size: 16px;
                        font-family: @fontMedium;
                        outline: none;
                        cursor: pointer;
                        border-bottom: 1px solid #ccc;
                        border-right: 3px solid transparent;
                        display: flex;
                        align-items: center;

                        img, span {
                            flex-grow: 0;
                        }

                        img {
                            margin-right: 10px;
                            display: block;
                            flex-shrink: 1;
                        }

                        &:last-child {
                            border-bottom: none;
                        }
                    }

                    > div:hover, > div.activeTab {
                        //background-color: rgba(77, 118, 179, 0.55);
                        border-right-color: #333;
                    }
                }
            }

            .simpleshown {
            }
        }

        .topContAllProj {
            margin-top: -60px;
            z-index: 10;
        }
    }

    ._md-datepicker-floating-label._md-datepicker-has-calendar-icon > label:not(.md-no-float):not(.md-container-ignore) {
        width: auto;
        right: auto;
        left: 0;
    }

    .page-content {
        padding: 30px 30px !important;
        margin-left: 20px;
        background-color: #fff;

        .author {
            margin-bottom: -25px;
            margin-top: -10px;

            .delAuthor {
                margin-top: 25px;

                img {
                    width: 50px;
                    height: 50px;
                    cursor: pointer;
                    outline: none;
                }
            }
        }

        .authorCont {
            position: relative;

            .authorInfo, .authorInfoAfter {
                font-family: @fontBold;
                font-size: 14px;
                color: @table;
                margin-bottom: -10px;
                margin-top: 15px;
            }

            .authorInfoAfter {
                margin-top: 4px !important;
            }

            .authorInp {
                md-input-container {
                    margin: 0;
                    padding-right: 5px;

                    label {
                        font-size: 14px;
                        margin-bottom: 0;
                        top: -18px;
                        position: absolute;
                    }
                }

                img {
                    width: 50px;
                    height: 50px;
                    padding: 5px 0 5px 10px;
                    outline: none;
                    cursor: pointer;
                }
            }

            .authors {
                position: absolute;
                width: 100%;
                max-height: 300px;
                overflow-y: auto;
                z-index: 1090;
                background-color: @white;
                box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);

                > div {
                    font-family: @fontBold;
                    font-size: 16px;
                    background-color: @white;
                    cursor: pointer;
                    color: @table;
                    padding: 10px 20px;

                    span {
                        color: #4BA3D5;
                    }
                }

                > div:hover {
                    background-color: rgb(238,238,238);
                }
            }
        }

        .m-search-button {
            text-align: start;
            cursor: default;
            padding-left: 0px;
            padding-right: 0px;
            position: relative;
            display: inline-block;

            img {
                vertical-align: top;
                margin: 0 5px 0 5px;
                cursor: pointer;
                outline: none;
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                -o-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                transform: rotate(90deg);
                position: absolute;
                top: 15px;
                left: 8px;
            }

            input {
                background: @InputBg;
                border: none;
                color: #4BA3D5;
                max-width: 142px;
                outline: none;
                border-bottom: 2px solid @inputColor;
                height: 50px;
                padding-left: 50px;
                padding-right: 20px;

                &::-webkit-input-placeholder {
                    color: #82c8f1;
                }

                &::-moz-placeholder {
                    color: #82c8f1;
                }

                &:-ms-input-placeholder {
                    color: #82c8f1;
                }

                &:-moz-placeholder {
                    color: #82c8f1;
                }
            }
        }

        .msg {
            font-family: @fontBold;
            font-size: 16px;
            color: #4BA3D5;

            p {
                font-family: @fontBold;
                font-size: 16px;
                color: #4BA3D5;
            }
        }

        .arrows {
            height: 80%;
            padding-left: 4px;
            padding-right: 5px;

            .topArr {
                display: inline-block;
                cursor: pointer;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 5px 10px 5px;
                border-color: transparent transparent #959ea7 transparent !important;
            }

            .bottomArr {
                cursor: pointer;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 10px 5px 0 5px;
                border-color: #959ea7 transparent transparent transparent !important;
            }
        }

        .tableHead {
            font-family: @fontBold;
            font-size: 16px;
            color: #555; //
            padding-bottom: 10px;
            border-bottom: 2px solid @table;

            > div {
                cursor: pointer;
            }

            > div:hover {
                .clickSortTop {
                    display: inline-block;
                    cursor: pointer;
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 0 5px 10px 5px !important;
                    border-color: transparent transparent #d1d1d1 transparent !important;
                }
                /*.bottomArr {
                    border-color: #d1d1d1 transparent transparent transparent;
                }*/
            }
        }

        .downloadExcel {
            cursor: pointer;
            font-family: @fontBold;
            font-size: 16px;
            color: #4BA3D5;
            padding-bottom: 10px;
        }

        .newProjLink {
            cursor: pointer;
            font-family: @fontBold;
            font-size: 16px;
            color: #4BA3D5;
        }

        .tableBody {
            > div {
                word-wrap: break-word;
                font-family: @fontMedium;
                color: rgba(65,66,73,0.5);
                padding: 10px 3px;
            }

            .grey {
                color: rgba(65,66,73,0.5);
            }

            a, a:hover, a:focus, > div.activeBtn {
                cursor: pointer;
                font-family: @fontBold;
                font-size: 16px;
                color: #4BA3D5;
            }

            img {
                outline: none;
            }
        }

        md-checkbox.md-default-theme.md-checked .md-icon, md-checkbox.md-checked .md-icon {
            background-color: #4BA3D5;
        }

        md-input-container, md-block {
            label:not(.md-container-ignore).md-required:after {
                content: none;
            }

            margin: 25px 0;

            .md-input {
                height: 50px;
                border-width: 0 0 2px;
                border-color: #4FA3D2;
                background: @InputBg;
            }



            label, .areaLbl {
                padding-left: 0;
                width: calc(~"100% - 20px");
                color: black;
                font-family: @fontBold;
                font-size: 14px;
                margin-bottom: 5px;
                -webkit-transform: translate3d(0,0,0) scale(1);
                transform: translate3d(0,0,0) scale(1);
                position: relative;
                display: inline-block;

                &[for="input_132"] {
                    top: 10px;
                }
            }

            .areaLbl.sel {
                margin-bottom: -28px;
                margin-top: 12px;
                -webkit-transform: translate3d(0,0,0) scale(1);
                transform: translate3d(0,0,0) scale(1);
                margin-bottom: 5px;
            }

            .active {
                -webkit-transform: translate3d(0,6px,0) scale(.75);
                transform: translate3d(0,7px,0) scale(0.75);
                -webkit-transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1);
                transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1);
                transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1);
                transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1);
                max-width: 100%;
                -webkit-transform-origin: left top;
                transform-origin: left top;
                /*display: inline-block;
                padding: 0;
                width: initial*/;
            }

            .areaLbl.sel.active {
                margin-bottom: 7px;
                margin-top: 0;
            }

            input {
                padding-left: 20px;
                //width: calc(~"100% - 20px");
            }

            .inValid {
                border-color: @error;

                md-select-value {
                    border-color: @error;
                }
            }

            .disabled {
                pointer-events: none;
                color: #999999; //
            }

            .errorMsg {
                color: @error;
                font-size: 12px;
            }

            .close-dialog {
                position: absolute;
                right: 11px;
                bottom: 13px;

                img {
                    width: 20px;
                    height: 20px;
                    max-width: 20px;
                    max-height: 20px;
                    cursor: pointer;
                    outline: none;
                }
            }



            .md-errors-spacer {
                display: none;
            }

            &.themeSelect {
                //min-width:100%;
            }

            .md-select-value {
                min-height: 45px;
                border-bottom-width: 2px;
                border-bottom-color: #4FA4D3;
                background-color: #EDF5FA;
                //padding: 0px 0px 0px 20px !important;
                min-width: 100%;
                font-family: @fontLight;
            }

            md-datepicker {
                width: 100%;
                max-width: 328px;

                .md-button.md-icon-button {
                    margin: 0;
                    padding: 0;
                }

                .md-datepicker-input-container {
                    width: calc(~"100% - 40px");
                    border-bottom-width: 2px;
                    border-bottom-color: @inputConteiner;
                    font-family: "Roboto-Light";
                    font-size: 16px;
                    margin: 0;

                    input {
                        width: calc(~"100% - 40px");
                    }
                }
            }

            .colorSelect {
                //width: 200px;
            }
        }

        md-input-container {
            &._md-datepicker-floating-label {
                /*background: @FiledBG;
                border-bottom: 2px solid @FiledBR;*/
                .md-datepicker-input.md-input {
                    background: none;
                    border: none;
                }

                .md-datepicker-triangle-button {
                    position: absolute;
                    right: 18px;
                    bottom: 4px;
                }
            }

            md-datepicker {
                height: 50px;
                border-bottom: 2px solid @inputColor;
                border-color: @inputColor;
                background: #edf5fa;
                display: block;
                width: 100%;
                box-sizing: border-box;
                padding-right: 0;

                .md-input {
                    height: 48px;
                    border-width: 0 0 0;
                    border-color: transparent;
                    background: none;
                }

                .md-datepicker-button {
                    top: 7px;
                }

                .md-datepicker-expand-triangle {
                    border: solid black;
                    border-width: 0 2px 2px 0;
                    display: inline-block;
                    padding: 6px;
                    width: auto;
                    margin: 0;
                    border-color: @inputColor;
                    -webkit-transform: translate3d(0,0,0);
                    transform: translate3d(0,0,0);
                    transform: rotate(45deg);
                    -webkit-transform: rotate(45deg);
                    position: absolute;
                    top: 6px;
                    right: 15px;
                    left: auto;

                    &:after {
                        display: none;
                    }
                }
            }
        }

        .additionalCitiesHead {
            margin: 10px 0;

            div {
                &:first-child {
                    font-family: @fontBold;
                }

                &:last-child {
                    font-family: @fontBold;
                    color: #4BA3D5;
                    padding: 10px 10px 0 10px;
                    cursor: pointer;
                }
            }
        }

        .additionalCities {
            padding-left: 20px;

            md-input-container {
                margin: 0;

                .addCity {
                    > div {
                        &:first-child {
                            position: relative;
                            margin-right: 10px;
                        }

                        &:last-child {
                            font-family: @fontBold;
                            color: #4BA3D5;
                            padding: 10px 10px 0 10px;
                            cursor: pointer;
                        }
                    }
                }
            }

            md-select {
                margin-top: -2px;
            }
        }

        .linksCont {
            .selectTypeLink {
                margin-right: 20px;
            }

            .linkFild {
                margin-top: -23px;
                flex-direction: column;

                label {
                    bottom: auto;
                    display: block;
                    left: -10px;
                }
            }

            .fileLink {
                margin-bottom: 10px;

                .smallFile {
                    padding: 20px 20px !important;
                }
            }

            md-input-container {
                margin: 25px 0;

                &:first-child {
                    margin: 25px 0 !important;
                }
            }
        }

        .deleteLink {
            font-family: @fontBold;
            color: #4BA3D5;
            padding: 10px 10px 0 10px;
            cursor: pointer;
            margin-top: 55px;
        }

        .HeadName {
            font-family: @fontBold;
            font-size: 20px;
            margin-bottom: 10px;
        }

        .adminFuncs {
            margin-top: 20px;
            margin-bottom: 20px;

            .adminFunc {
                font-family: @fontBold;
                font-size: 15px;
                color: #4BA3D5;
                margin-bottom: 10px;
                cursor: pointer;
            }
        }

        .resultString {
            font-family: @fontBold;
            font-size: 16px;
            color: green;
        }

        .errorResponse {
            color: @error;
        }

        .userImg {
            .imgwrap {
                //margin-right: 30px;
                img {
                    width: 100px;
                    height: 100px;
                    margin-right: 30px;
                }
            }

            .blazon {
                min-width: 430px !important;

                img {
                    margin: 0 auto !important;
                    width: auto !important;
                    height: 92px !important;
                }
            }

            .MainBg {
                min-width: 430px !important;

                img {
                    width: auto !important;
                    height: auto !important;
                    max-width: 400px !important;
                }
            }

            .imgwrapNotEdit {
                img {
                    width: 200px;
                    height: 200px;
                }
            }

            .selectImgBtn {
                cursor: pointer;
                outline: none;
            }

            .compInfo {
                margin-top: 10px;
                font-family: @fontBold;
                margin-bottom: 15px;
                font-size: 16px;

                > div {
                    margin-bottom: 10px;
                    color: rgba(65,66,73,0.5);

                    > a, a:hover, a:visited {
                        font-size: 16px;
                        color: #4BA3D5;
                    }
                }

                span {
                    font-family: @fontBold;
                    color: #333;
                    font-size: 18px;
                }
            }
        }

        .selectImg {
            margin-top: 20px;
            background-color: @file;
        }

        .hideImgSelect {
            visibility: hidden;
            position: absolute;
        }

        .resultImg {
            padding-top: 35px;
            padding-right: 15px;
        }

        img-crop {
            width: 100%;
            height: 100%;
            display: block;
            position: relative;
            overflow: hidden;

            canvas {
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                outline: 0;
                -webkit-tap-highlight-color: transparent
            }
        }

        .cropArea {
            background: @file;
            overflow: hidden;
            width: 500px;
            height: 350px;
            display: inline-block;
        }

        .file-area {
            width: 100%;
            position: relative;

            input[type=file] {
                position: absolute;
                width: calc(~"100% - 20px");
                height: 100%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 0;
                cursor: pointer;
            }

            .file-dummy {
                word-wrap: break-word;
                padding: 37px 25px;
                line-height: 1.4;
                background: #EDF5FA;
                border: 2px dashed #4FA4D3;
                border-radius: 6px;
                transition: background 0.3s ease-in-out;

                span {
                    color: @span;
                    font-family: @fontBold;

                    > span {
                        color: #4BA3D5;
                    }
                }

                .success {
                    //display:none;
                }
            }

            .inValid {
                border-color: @error;

                md-select-value {
                    border-color: @error;
                }
            }

            .Valid {
                background-color: @valid;
            }
        }

        .frst-step-bnt {
            font-size: 18px;
            font-family: @fontBold;
            margin-bottom: 20px;
            float: right;

            @media screen and (max-width: 416px) {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
            }

            span {
                color: @span2;
                padding-right: 5px;
            }

            label {
                height: 60px;
                border-radius: 4px;
                background: linear-gradient(90deg, #4bc6d5 0.04%, #4ba3d5 100%);
                cursor: pointer;
                display: inline-block;
                vertical-align: middle;
                color: #ffffff;
                padding: 20px 35px;
                text-align: center;
                font-family: @fontMedium;
                box-sizing: border-box;

                @media screen and (max-width: 416px) {
                    margin: 0 auto 15px !important;
                    width: 182px;
                }
            }

            .editProfBtn {
                margin-top: 20px;
                width: calc(~"100% - 30px");
                text-align: center;
            }

            .close-step {
                border: none;
                font-size: 16px;
                font-family: @fontBold;
                margin-right: 7px;
            }

            img {
                outline: none;
                cursor: pointer;
            }
        }

        .frst-step-bnt2 {
            font-size: 18px;
            font-family: @fontBold;
            margin-top: 40px;
            height: 54px;

            label {
                margin: 0;
                width: 100%;
                margin-top: 15px;
                color: #4BA3D5;
                padding: 14px 67px;
                cursor: pointer;
                border: 2px solid #4BA3D5;
            }
        }
    }

    .page-content-withoutPdng {
        padding: 0 !important;
        padding-left: 0 !important;

        md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar {
            color: #4BA3D5;
            background: #4BA3D5;
        }

        md-tabs .md-tab.md-active {
            color: #4BA3D5;
        }

        md-content {
            padding: 25px;
            background-color: @white;

            .compInfo {
                margin-top: 10px;
                font-family: @fontBold;
                margin-bottom: 15px;
                font-size: 16px;

                > div {
                    margin-bottom: 10px;
                    color: @table;
                }

                span {
                    font-family: @fontBold;
                    color: #4BA3D5;
                    font-size: 18px;
                }

                span.simple {
                    font-size: 16px;
                    color: @table;
                }

                .roles {
                    max-width: 400px;
                }
            }

            &.tasks {
                md-select {
                    margin-top: 0;
                }
                /*.md-select-value > span:not(.md-select-icon) {
                    position: absolute;
                    top: -18px;
                    left: 41px;
                }*/
                md-select[required].ng-invalid:not(.md-no-asterisk) .md-select-value span:first-child:after {
                    position: absolute;
                    top: -18px;
                    left: 41px;
                }
            }
        }

        .settings {
            md-input-container:first-child {
                margin-top: 0;
            }
        }

        .ThemeForm {
            .md-input-container {
                margin-top: 0;
                margin-bottom: 10px;
            }

            .md-stretch-tabs {
                display: none;
            }
        }
    }

    .userChange {
        padding: 0 !important;
    }
}

    md-sidenav {
        display: none;
        background-color: @AdditionalColor1;
        padding: 15px 0;
        position: fixed;
        padding-top: 40px;

        > div {
            padding: 10px 35px;
            color: @white;
            font-size: 16px;
            font-family: @fontBold;
            outline: none;
            cursor: pointer;
        }

        > div:hover, > div.activeTab {
            background-color: #4BA3D5;
        }
    }

    .md-sidenav-backdrop {
        display: none;
        height: 100% !important;
        position: fixed !important;
    }

    div.pac-container.pac-logo::after {
        display: none !important;
    }

    .deleteDialog {
        border-radius: 0 !important;

        .md-dialog-content {
            h2 {
                color: #4BA3D5;
                font-family: @fontBold;
            }

            > div > p {
                font-family: @fontLight;
            }
        }

        md-dialog-actions button.md-button {
            color: #4BA3D5 !important;
            font-family: @fontBold;
        }
    }

    @media screen and (max-width: 960px) {
        section.CabinetSection .page-content .userImg .imgwrapNotEdit img {
            width: 140px;
            height: 140px;
        }

        section.CabinetSection .page-content .cropArea {
            width: 100%;
        }
    }

    @media screen and (max-width: 825px) {
        section.CabinetSection .root-content .container .shadow-project .page-menu {
        width: 100%;
        max-width: 100%;
        margin-bottom: 30px;
            /*position: absolute;
            opacity: 1;
            width: 100%;
            min-width: calc(~"100% - 30px");
            background-color: rgba(77, 118, 179, 1);*/
        }

        .content .root-content .shadow-project .page-content {
            width: 100%;
            min-width: 100%;
        }

        .CabinetHeader.all-header .root-header-info .leftHeadBlock .cabName img {
            display: block;
        }

        md-sidenav {
            display: block;
        }

        .md-sidenav-backdrop {
            display: block;
        }

        section.CabinetSection .page-content{
            margin-left: 0;
        }
        section.CabinetSection .root-content .container .shadow-project{
            flex-wrap: wrap;
        }

    }

    @media screen and (max-width: 600px) {
        .CabinetHeader.all-header .root-header-info h1 {
            margin-top: 10px;
            line-height: 38px;
            font-size: 38px;
        }

        .CabinetHeader.all-header .root-header-info .leftHeadBlock .cabName img {
            height: 30px;
            width: 30px;
            margin-top: 10px;
        }

        section.CabinetSection .page-content .userImg .imgwrapNotEdit img {
            width: initial;
            height: initial;
            max-width: 100%;
        }
        section.CabinetSection .page-content .userImg .imgwrap {
            idth: 100%;
            justify-content: center;
        }
        section.CabinetSection .page-content .userImg .imgwrap img {
            width: initial;
            height: initial;
            max-width: 100%;
            margin-bottom: 10px;
            margin-right: auto;
            margin-right: auto;
            margin-left: auto;
        }
    }