@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap');

#notice6, #golNotice1, #allReqNotice7{
    display: none;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background: #eee;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 17px;
}

header {
    background: #222;
    padding: 20px 30px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo {
    font-weight: 600;
    font-size: 20px;
}

header nav a {
    color: #fff;
    margin-left: 15px;
    text-decoration: none;
    transition: all 500ms ease;
}

header nav a.btn {
    padding: 5px;
    border: 1px solid silver;
    border-radius: 5px;
}

header nav a:hover {
    color: #a1a1a1;
}

header nav a.btn:hover {
    border-color: #de7474;
}

main {
    float: left;
    margin-top: 10px;
    margin-left: 2%;
    width: 96%;
}

form:not(#myReqForm) {
    margin: 10px 0;
    color: #000000;
}

form label {
    display: block;
    width: 100%;
    cursor: pointer;
}

.base {
    color: #1180e9;
    margin-left: 10px;
    margin-left: 10px;
}

#puBaseFloor, .puBlockLeft, .puBlockRight, #reqAppart, #reqAddrBlock, #reqFloorBlock, #reqApartBlock {
    display: inline-block;
}

#puAddrSearch {
    max-width: calc(100% - 40px);
}

#puFloor, #puApartment {
    width: 150px;
}


.flexBlock div input, .flexBlock div span {
    display: inline-block;
}

#reqAddrBlock {
    width: 70%;
}

#keyAddrSearchInSearch {
    width: 65%;
}

#reqFloorBlock, #reqApartBlock, #keyFloor, #keyApartment{
    width: 15%;
    padding-left: 20px;
}

.puBlockRight:not(#puBlockRightDVRs) {
    width: 40%;
    margin-right: 20px;
}

.puBlockLeft:not(#puBlockLeftDVRs) {
    width: 60%;
}

#puBlockRightDVRs{
    width: 60%;
    padding: 0 10px 0 20px;
}

#puBlockLeftDVRs {
    width: 40%;
}

.flexBlock {
    display: flex;
}


#puHistory, #puHistoryDVRs, #myReqHistory {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 450px;
    background: #ececec;
}


#puApartment {
    margin-bottom:auto;
}



#puPart, #puTel {
    width: 40%;
}

#floor, #part, #foreman, #apartment, #office, #tel, #keyTel, #recall {
    width: 20%;
}

#keyApartmentInSearch, #keyCarplaceInSearch, #keyRequestSearch, #allKeyRequest {
    width: 6%;
    margin: 0;
}

#keyRequestSearch, #allKeyRequest {
    padding-left: 0;
    padding-right: 0;
}

#note, #puNote {
    width: 80%;
    height: fit-content;
}

input[type="checkbox"], #done, #puRecall, #puForeman, #puOffice, #keyOccasion {
    width: fit-content;
    margin-left: 15px;
}

#keyOccasion {
    padding: 0;
    margin-left: 15px;
}


#disp {
    margin-left: 0;
}

#dispName {
    box-sizing: border-box;
    resize: vertical;
    width: 20%;
    border: 1px solid silver;
    border-radius: 5px;
    padding: 10px 15px;
    margin-top: 10px;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    display: none;
}

#puMessageBlock {
    background: #f3e1ab;
    width: 60%;
    padding-bottom: 10px;
}

#reqIsDone {
    width: 250px;
    height: 100px;
    border: 2px solid rgb(49, 28, 122);
    border-radius: 5px;
    position: absolute;
    bottom: 150px;
    left: 50%;
    transform: translate(-50%, 0) rotate(-7deg);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 26px;
    color: rgb(49, 28, 122);
    text-align: center;
    padding: 10px;
}

#reqIsDone p{
    margin-bottom: 10px;
}

.changeDone {
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 10px;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 0);
}

#search {
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid silver;
    border-radius: 5px;
    padding: 10px 15px;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    width: calc(100% - 50px);

}

#openAddrPU:hover, #openAddrInfoPU:hover {
    transform: scale(1.05) translate(0, 10px);
    cursor: pointer;
}

#openAddrPU {
    margin: 0;
    width: 40px;
    height: 40px;
    display: none;
    transform: translate(0, 10px);
    
}

#openAddrInfoPU {
    margin: 0;
    width: 30px;
    height: 30px;
    transform: translate(0, 10px);
    display: inline-block;
    
}

.changeDone:hover {
    transform: translate(-50%, 0) scale(1.05);
}

#puAnswerBlock {
    background-color: #f0c9f8;
    padding-bottom: 10px;
}


#message {
    margin-top: 10px;
    display: block;
    padding: 5px;
    width: 100%;
    max-height: 200px;
    overflow: auto;
}

#puBaseNote {
    max-height: 120px;
    overflow: auto;
    width: 80%;
}


#addressSearch{
    width: 60%;
}

#occasion, #puOccasion, #parking, #carplace, #keyParking, #keyKey, #keyCard, #keySticker {
    width: fit-content;
    margin-right: 15px;
}

.keyParking, .keyKey, .keyCard, .keySticker, #carplaceOwner, #timetables {
    display: none;
}


::placeholder {
    color: #000000;
  }

textarea, select, input{
    box-sizing: border-box;
    resize: vertical;
    width: 100%;
    border: 1px solid silver;
    border-radius: 5px;
    padding: 10px 15px;
    margin-top: 10px;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    
}

#keyRequestChangeForm select, #keyRequestChangeForm span, #puGotMessege, #serviceBTN, #timetables form input, #puDispNameFin  {
    width: fit-content;
    display: inline-block;
}

#keyRequestChangeForm input:not(#keyAddrSearchpu3):not(#fiopu3t):not(.tinyinput) {
    width: 200px;
}

.tinyinput {
    width: 70px;
}


#searchReqForm, #keyRequestForm {
    margin-top: 0px;
}

form button {
    border: 0;
    padding: 10px 20px;
    margin-top: 20px;
    margin-right: 30px;
    border-radius: 5px;
    cursor: pointer;
    background: #fec008;
    color: #000000;
    transition: transform 500ms ease;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
}

.center-text {
    text-align: center;
}

.yesNoBlock {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
   }

.redBTN {
    border: 0;
    padding: 10px 20px;
    margin-top: 10px;
    display: block;
    border-radius: 5px;
    cursor: pointer;
    background: #de7474;
    color: #000000;
    transition: transform 500ms ease;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;

}

.greenBTN {
    border: 0;
    padding: 10px 20px;
    margin-top: 10px;
    display: block;
    border-radius: 5px;
    cursor: pointer;
    background: #95ca94;
    color: #000000;
    transition: transform 500ms ease;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;

}

.grayBTN {
    border: 0;
    padding: 10px 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 5px;
    cursor: pointer;
    background: #74736f;
    color: #ffffff;
    transition: transform 500ms ease;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;

}

.inactiveGreenBTN {
    border: 0;
    padding: 10px 20px;
    width: 90%;
    height: 60px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 5px;
    cursor:auto;
    background: #69e674;
    color: #000000;
    transition: transform 500ms ease;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
}

.inactiveGreenBTN:hover{
    transform: none;
}

.oneOfThree .grayBTN{
    width: 90%;
    height: 60px;
}

.oneOfThree, #fiopu3 {
    width: 33%;
}

.searchfield, .calendar {
    width: fit-content;
}

button:hover, .post a:hover {
    transform: scale(1.05);
}

.closePopup:hover {
    transform: scale(1.05) translate(-2.5%, -2.5%);
}

.error-mess {
    color: red;
    margin: 10px 0;
    font-weight: 600;
    display: none;
}

.post {
    margin-bottom: 50px;
}

.post h2 {
    margin-bottom: 10px;
}

.post .author {
    margin-top: 15px;
    font-weight: 600;
}

.post .author span {
    background: #e1bb4a;
    padding: 2px 7 px;
    font-weight: 300;
    border-radius: 2px;
}

.closePopup {
    float: right;
    width: 40px;
    height: 40px;
    border: none;
    background-image: url('../img/close.png');
    background-size: cover;
    padding: 0px;
}



.search_result-name{
    text-decoration: none;
    display: block;
    box-sizing: border-box;
    margin-bottom: 1px;
    width: 100%;
    font-weight: 600;
    padding: 5px 20px;
    border-radius: 5px;
    background: #e1bb4a;
    color: #42410c;
    transition: transform 500ms ease;
}

#puAddrSearch-result {
    height: 245px;
    overflow: auto;
    display: none;
}


.comment{
    width: 100%;
    background: #fec008;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    color: #42410c;
    margin-bottom: 30px;
}

#hidden_form {
    display: none;
}

footer {
    float: left;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: #222;
    padding: 30px;
    color: #fff;
    margin-top: 100px;
}

.search_box {
	position: relative;
}


.popup-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
}

.popup {
    position: absolute;
    background: #ffffff;
    width: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
}

.popupAuto {
    position: absolute;
    background: #ffffff;
    max-width: 90%;
    min-width: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    max-height: 95%;
    padding-left: 30px;
}

.paddings {
    padding: 10px 30px 30px 0;
}

.paddings .flexBlock {
    margin-top: 40px;
}

.paddings span, .paddings p {
    display: block;
    margin-top: 10px;
}

.popupBig {
    position: absolute;
    background: #ffffff;
    width: 90%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 0 30px 30px;
    overflow-y: auto;
    max-height: 95%;
}

.reqRow, .remRow {
    cursor: pointer;
}

[data-rowColor='yellow'] {
    cursor: pointer;
    background-color: #fce6a7;
}

[data-rowColor='green'] {
    cursor: pointer;
    background-color: #bef8ac;
}

[data-rowColor='purple'] {
    cursor: pointer;
    background-color: #f0c9f8;
}

[data-rowColor='red'] {
    cursor: pointer;
    background-color: #ff7777;;
}


table {
    width: 100%;
    border-collapse: collapse;
}

#requests td {
    padding: 0px 5px;
    border-bottom: 1px solid white;
  }

#dvrs td {
    border-bottom: 1px solid white;
    padding: 10px;
}

#keyRequests tr {
    border-bottom: 1px solid white;
}

#allReminders tr {
    border-bottom: 2px solid white;
    border-top: 2px solid white;
}

#keyRequests table tr {
    border-bottom: none;
}

.reqNum {
    width: 5%;
    padding: 0;
}

.keyReqNum {
    padding: 5px;
}

[data-numColor='red'], #puDisp, [data-AddrPre='banned'] {
    background-color: rgb(240, 126, 151);
}

[data-numColor='blue'] {
    background-color: rgb(191, 191, 255);
}

[data-numColor='blueRed'] {
    background: linear-gradient(0deg, rgb(240, 126, 151), rgb(191, 191, 255));
}



.reqAddress {
    width: 40%;
}
.reqTel {
    width: 15%;
}
.reqOccasion {
    width: 12%;
}
.reqForeman {
    width: 5%;
}
.reqNote {
    width: 20%;
}
.reqDate {
    width: 3%;
}


#myRequests td{
    border-top: solid white 6px;
    padding: 5px;
}

#popupMyReq div div span, #popupReminder div div span{
    display: inline-block;
}

#myReqHistory {
    max-height: 400px;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    background: #ececec;
}

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

#dvrBTNs button {
    margin: 0 0 15px 0;
}

#dvrNote {
    height: 150px;
}

.bigChechbox {
    transform: scale(1.2);
}

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