header {
    padding: 0 30px;
    min-width: 560px;
}

#page {
    min-width: 760px;
    max-width: 900px;
    margin:auto;
}

#form {
    padding: 30px;
}

h4 {
    margin-bottom: 0px;
    padding: 10px 0px;
}

.form-control {
    width: 600px;
}

.rate {
    float: left;
    height: 46px;
}

.rate:not(:checked) > input {
    position:absolute;
    visibility:hidden;
}

.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}

.rate:not(:checked) > label:before {
    content: '★ ';
}

.rate > input:checked ~ label {
    color: #F30423;    
}

.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #F30423;  
}

.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #d4021d;
}

.rateContainer {
    width: 600px;
    height: 46px;
    margin-bottom: 10px;
}

.btn-danger {
    background-color: #F30423;
    border-color: #F30423;
}

.btn-danger:hover {
    background-color: #d4021d;
    border-color: #d4021d;
}

.d-block {
    width: 30%;
    max-width: 250px;
    margin-top: 150px;
}

.textTh {
    margin-top: 5%;
    margin-bottom: 0%;
}

.star {
    visibility: hidden;
    color: #d4021d;
    text-indent: 5px;
    font-weight: bold;
}

.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #F30423;
    border-color: #F30423;
}

.nav-link {
    color: #d4021d;
}    

.nav-link:focus, .nav-link:hover, .nav-link {
    color: #F30423;
}

#myTab {
    margin-top: 20px;
}

#myTabContent {
    margin-top: 15px;
}

#list-tab {
    max-height: 10%;
}

.admin-form {
    padding: 0px 30px;
}

#engButton {
    margin-right: 30px;
}

#customerForm {
    margin-top: 16px;
}

.engText {
 display: inline-block;
}

.btn-close, #addNewEngGenPass, #addNewPmGenPass {
    float: right;
}

.dropdown-item:hover {
    background-color: #ffe5e5;
}
    
.dropdown-item.active, .dropdown-item:active {
    background-color: #F30423;
}

#FormEnter4 {
    background-color: white;
}

#eng-change-btns {
    float: right;
}

.alert-danger {
    color:#d4021d;
    padding: 10px;
}

.alert-success {
    padding: 10px;
}

ul.dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
}

#login-page {
    width: 400px;
    height: 400px;
    margin: auto;
    margin-top: 10%;
}

#LoginEnter1, #LoginEnter2 {
    width: 300px;
}

.login-content {
    width: 300px;
    margin-left: 50px;
}

#loginBtn {
    margin-left: 148px;
}

#login-img {
    margin-left: 100px;
}

#login-text {
    text-align: center;
}

#logout-btn, .dashboard-btns {
    margin-top: 5px;
    float: right;
}

#proj-change-btns, #pm-change-btns, .passForm {
    float: right;
}

.form-check {
    margin-left: 10px;
    margin-top: 5px;
}

.form-check-input:checked {
    background-color: #F30423;
    border-color: #d4021d;
}

#addProjEnter, #changeProjEnter{
    width: 340px;
}

#pm-list {
    min-width: 300px;
    max-width: 400px;
}

ul.list-group {
    height: 150px;
    overflow-y: auto;
    border: 1px solid #c8c9ca;
}

#addPmEnter, #changePmEnter, #addEngEnter, #changeEngEnter {
    width: 400px;
}

#addPmEnterPass, #changePmEnterPass, #addEngEnterPass, #changeEngEnterPass {
    width: 200px;
}

#add-new-proj-btn, .bottom-buttons {
    position: absolute;
    bottom: 0%;
}

#addProjForm, #changeProjForm {
    position: relative;
}

.nav-tabs {
    border-color: #c8c9ca;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border-color: #c8c9ca #c8c9ca #fff;

}

@media (max-width:1100px) {

    .btn-feedback-wrap {
        white-space:normal !important;
        word-wrap: break-word; 
        max-width:320px;
    }

    .btn-project-wrap {
        white-space:normal !important;
        word-wrap: break-word; 
        max-width:220px;
    }

    .btn-projectmanager-wrap {
        white-space:normal !important;
        word-wrap: break-word; 
        max-width:240px;
    }

}

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
    background-color: #ffe5e5;
 }

thead {
    background-color: #F30423;
    color: white;
} 

.table {
    border-color: black;
}

#dashboard-body {
    background-color: #494951;
    color: white;
    min-width: 760px;
}

.rating {
    display: inline-block;
    unicode-bidi: bidi-override;
    color: #888888;
    font-size: 50px;
    height: 50px;
    width: auto;
    margin: 0;
    position: relative;
    padding: 0;
  }
  
  .rating-upper {
    color: #ffcf3d;
    padding: 0;
    position: absolute;
    z-index: 1;
    display: flex;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  
  .rating-lower {
    padding: 0;
    display: flex;
    z-index: 0;
  }
  
#feedbacks-table {
    display: block;
    transform: translateX(-50%);
    margin-left: 50%;
    width: 1200px;
}

.avatar {
    margin-right: 15px;
}

.eng-info {
    width: 260px;
    font-size: 26px;
}

.rating {
    position: relative;
    bottom: 5px;
}

.flex-container {
    font-size: 26px;
    align-items: flex-end;
    display: flex;
    justify-content: center;
    justify-content: space-between;
}

.rate-item {
    padding-bottom: 10px;
}

.dashboard-elem {
    min-width: 550px;
    float:left;
    padding: 10px 20px;
}

.dashboard-page {
    position: relative;
    bottom: 15px;
    white-space: nowrap;
}

.dashboard_items {
    display: flex;
    justify-content: center;
    justify-content: space-between;
}

.div-headers {
    width:100%;
    text-align: right;
    font-size: 28px;
    padding-right: 20px;
}

.dashboard-page {
    margin: auto;
    min-width: 560px;
}

@media (max-width: 1100px) {
  .dashboard-page {
    margin: auto;
    width: 550px;
  }
}

@media (min-width: 1101px) and (max-width: 1650px) {
  .dashboard-page {
    margin: auto;
    width: 1100px;
  }
}

@media (min-width: 1651px) and (max-width: 2200px) {
  .dashboard-page {
    margin: auto;
    width: 1650px;
  }
}

@media (min-width: 2201px) and (max-width: 2750px) {
  .dashboard-page {
    margin: auto;
    width: 2200px;
  }
}

@media (min-width: 2751px) and (max-width: 3300px) {
  .dashboard-page {
    margin: auto;
    width: 2750px;
  }
}

@media (min-width: 3301px) and (max-width: 3850px) {
  .dashboard-page {
    margin: auto;
    width: 3300px;
  }
}

@media (min-width: 3851px) {
  .dashboard-page {
    margin: auto;
    width: 3850px;
  }
}

.charts {
    width: 760px;
    margin: auto;
}

.charts label{
    font-size: 22px;
    display: block;
    margin: 10px auto;
    text-align: center;
}

#dashboard-body #page header {
    position: relative;
}

#dashboard-body #page header h1 {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
}

.eng-page-info {
    width: 260px;
    height: 110px;
}

.flex-container-eng {
    font-size: 22px;
    white-space: nowrap;
}

.personal-eng-info .rate-item {
    text-align: center;
    padding-bottom: 22px;
}

.personal-eng-info {
    padding-top: 30px;
}

/* new */

.upload-msg {
    border: 1px solid;
    border-radius: 0.25rem;
    height: 250px;
    width: 250px;
    border-color: #ced4da;
    display: flex;
    align-items: center; /* Центрирование по вертикали */
    justify-content: center;
    color: #8f9498;
}

.croppie-container .cr-boundary {
    margin-left: 0%;
    border-radius: 0.25rem;
}

.croppie-container .cr-slider-wrap {
    margin-left: 0%;
    margin-bottom: 0%;
    text-align: left;
}

#croppedImage {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

#changeEngImg {
    height: 250px;
    width: 250px;
}

.loader {
    margin: 100px auto;
    font-size: 25px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load5 1.1s infinite ease;
    animation: load5 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }
  @-webkit-keyframes load5 {
    0%,
    100% {
      box-shadow: 0em -2.6em 0em 0em #f30423, 1.8em -1.8em 0 0em rgba(243,4,35, 0.2), 2.5em 0em 0 0em rgba(243,4,35, 0.2), 1.75em 1.75em 0 0em rgba(243,4,35, 0.2), 0em 2.5em 0 0em rgba(243,4,35, 0.2), -1.8em 1.8em 0 0em rgba(243,4,35, 0.2), -2.6em 0em 0 0em rgba(243,4,35, 0.5), -1.8em -1.8em 0 0em rgba(243,4,35, 0.7);
    }
    12.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(243,4,35, 0.7), 1.8em -1.8em 0 0em #f30423, 2.5em 0em 0 0em rgba(243,4,35, 0.2), 1.75em 1.75em 0 0em rgba(243,4,35, 0.2), 0em 2.5em 0 0em rgba(243,4,35, 0.2), -1.8em 1.8em 0 0em rgba(243,4,35, 0.2), -2.6em 0em 0 0em rgba(243,4,35, 0.2), -1.8em -1.8em 0 0em rgba(243,4,35, 0.5);
    }
    25% {
      box-shadow: 0em -2.6em 0em 0em rgba(243,4,35, 0.5), 1.8em -1.8em 0 0em rgba(243,4,35, 0.7), 2.5em 0em 0 0em #f30423, 1.75em 1.75em 0 0em rgba(243,4,35, 0.2), 0em 2.5em 0 0em rgba(243,4,35, 0.2), -1.8em 1.8em 0 0em rgba(243,4,35, 0.2), -2.6em 0em 0 0em rgba(243,4,35, 0.2), -1.8em -1.8em 0 0em rgba(243,4,35, 0.2);
    }
    37.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(243,4,35, 0.2), 1.8em -1.8em 0 0em rgba(243,4,35, 0.5), 2.5em 0em 0 0em rgba(243,4,35, 0.7), 1.75em 1.75em 0 0em #f30423, 0em 2.5em 0 0em rgba(243,4,35, 0.2), -1.8em 1.8em 0 0em rgba(243,4,35, 0.2), -2.6em 0em 0 0em rgba(243,4,35, 0.2), -1.8em -1.8em 0 0em rgba(243,4,35, 0.2);
    }
    50% {
      box-shadow: 0em -2.6em 0em 0em rgba(243,4,35, 0.2), 1.8em -1.8em 0 0em rgba(243,4,35, 0.2), 2.5em 0em 0 0em rgba(243,4,35, 0.5), 1.75em 1.75em 0 0em rgba(243,4,35, 0.7), 0em 2.5em 0 0em #f30423, -1.8em 1.8em 0 0em rgba(243,4,35, 0.2), -2.6em 0em 0 0em rgba(243,4,35, 0.2), -1.8em -1.8em 0 0em rgba(243,4,35, 0.2);
    }
    62.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(243,4,35, 0.2), 1.8em -1.8em 0 0em rgba(243,4,35, 0.2), 2.5em 0em 0 0em rgba(243,4,35, 0.2), 1.75em 1.75em 0 0em rgba(243,4,35, 0.5), 0em 2.5em 0 0em rgba(243,4,35, 0.7), -1.8em 1.8em 0 0em #f30423, -2.6em 0em 0 0em rgba(243,4,35, 0.2), -1.8em -1.8em 0 0em rgba(243,4,35, 0.2);
    }
    75% {
      box-shadow: 0em -2.6em 0em 0em rgba(243,4,35, 0.2), 1.8em -1.8em 0 0em rgba(243,4,35, 0.2), 2.5em 0em 0 0em rgba(243,4,35, 0.2), 1.75em 1.75em 0 0em rgba(243,4,35, 0.2), 0em 2.5em 0 0em rgba(243,4,35, 0.5), -1.8em 1.8em 0 0em rgba(243,4,35, 0.7), -2.6em 0em 0 0em #f30423, -1.8em -1.8em 0 0em rgba(243,4,35, 0.2);
    }
    87.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(243,4,35, 0.2), 1.8em -1.8em 0 0em rgba(243,4,35, 0.2), 2.5em 0em 0 0em rgba(243,4,35, 0.2), 1.75em 1.75em 0 0em rgba(243,4,35, 0.2), 0em 2.5em 0 0em rgba(243,4,35, 0.2), -1.8em 1.8em 0 0em rgba(243,4,35, 0.5), -2.6em 0em 0 0em rgba(243,4,35, 0.7), -1.8em -1.8em 0 0em #f30423;
    }
  }
  @keyframes load5 {
    0%,
    100% {
      box-shadow: 0em -2.6em 0em 0em #f30423, 1.8em -1.8em 0 0em rgba(243,4,35, 0.2), 2.5em 0em 0 0em rgba(243,4,35, 0.2), 1.75em 1.75em 0 0em rgba(243,4,35, 0.2), 0em 2.5em 0 0em rgba(243,4,35, 0.2), -1.8em 1.8em 0 0em rgba(243,4,35, 0.2), -2.6em 0em 0 0em rgba(243,4,35, 0.5), -1.8em -1.8em 0 0em rgba(243,4,35, 0.7);
    }
    12.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(243,4,35, 0.7), 1.8em -1.8em 0 0em #f30423, 2.5em 0em 0 0em rgba(243,4,35, 0.2), 1.75em 1.75em 0 0em rgba(243,4,35, 0.2), 0em 2.5em 0 0em rgba(243,4,35, 0.2), -1.8em 1.8em 0 0em rgba(243,4,35, 0.2), -2.6em 0em 0 0em rgba(243,4,35, 0.2), -1.8em -1.8em 0 0em rgba(243,4,35, 0.5);
    }
    25% {
      box-shadow: 0em -2.6em 0em 0em rgba(243,4,35, 0.5), 1.8em -1.8em 0 0em rgba(243,4,35, 0.7), 2.5em 0em 0 0em #f30423, 1.75em 1.75em 0 0em rgba(243,4,35, 0.2), 0em 2.5em 0 0em rgba(243,4,35, 0.2), -1.8em 1.8em 0 0em rgba(243,4,35, 0.2), -2.6em 0em 0 0em rgba(243,4,35, 0.2), -1.8em -1.8em 0 0em rgba(243,4,35, 0.2);
    }
    37.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(243,4,35, 0.2), 1.8em -1.8em 0 0em rgba(243,4,35, 0.5), 2.5em 0em 0 0em rgba(243,4,35, 0.7), 1.75em 1.75em 0 0em #f30423, 0em 2.5em 0 0em rgba(243,4,35, 0.2), -1.8em 1.8em 0 0em rgba(243,4,35, 0.2), -2.6em 0em 0 0em rgba(243,4,35, 0.2), -1.8em -1.8em 0 0em rgba(243,4,35, 0.2);
    }
    50% {
      box-shadow: 0em -2.6em 0em 0em rgba(243,4,35, 0.2), 1.8em -1.8em 0 0em rgba(243,4,35, 0.2), 2.5em 0em 0 0em rgba(243,4,35, 0.5), 1.75em 1.75em 0 0em rgba(243,4,35, 0.7), 0em 2.5em 0 0em #f30423, -1.8em 1.8em 0 0em rgba(243,4,35, 0.2), -2.6em 0em 0 0em rgba(243,4,35, 0.2), -1.8em -1.8em 0 0em rgba(243,4,35, 0.2);
    }
    62.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(243,4,35, 0.2), 1.8em -1.8em 0 0em rgba(243,4,35, 0.2), 2.5em 0em 0 0em rgba(243,4,35, 0.2), 1.75em 1.75em 0 0em rgba(243,4,35, 0.5), 0em 2.5em 0 0em rgba(243,4,35, 0.7), -1.8em 1.8em 0 0em #f30423, -2.6em 0em 0 0em rgba(243,4,35, 0.2), -1.8em -1.8em 0 0em rgba(243,4,35, 0.2);
    }
    75% {
      box-shadow: 0em -2.6em 0em 0em rgba(243,4,35, 0.2), 1.8em -1.8em 0 0em rgba(243,4,35, 0.2), 2.5em 0em 0 0em rgba(243,4,35, 0.2), 1.75em 1.75em 0 0em rgba(243,4,35, 0.2), 0em 2.5em 0 0em rgba(243,4,35, 0.5), -1.8em 1.8em 0 0em rgba(243,4,35, 0.7), -2.6em 0em 0 0em #f30423, -1.8em -1.8em 0 0em rgba(243,4,35, 0.2);
    }
    87.5% {
      box-shadow: 0em -2.6em 0em 0em rgba(243,4,35, 0.2), 1.8em -1.8em 0 0em rgba(243,4,35, 0.2), 2.5em 0em 0 0em rgba(243,4,35, 0.2), 1.75em 1.75em 0 0em rgba(243,4,35, 0.2), 0em 2.5em 0 0em rgba(243,4,35, 0.2), -1.8em 1.8em 0 0em rgba(243,4,35, 0.5), -2.6em 0em 0 0em rgba(243,4,35, 0.7), -1.8em -1.8em 0 0em #f30423;
    }
  }
  

#loadingModal {
    display: none;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}


#loadingModalContent {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #f30423;
    border-radius: 10px;
}