.appointment-settings-layout {
    padding: 32px 256px 20px 256px;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    font-family: 'Manrope';
}

@mixin header-style {
	font-family: Manrope;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: 0px;
	text-align: left;
}

@mixin flex-row {
	display: flex;
	flex-direction: row;
}

@mixin grey-header {
	width: 556px;
	height: 35px;
	padding: 10px 0px 8px 0px;
	font-family: Manrope;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
	color: rgba(60, 60, 67, 0.6);
}

@mixin flex-end {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.settings-schedule-form-layout {
	position: absolute;
	top: 1vw;
	left: 18vw;
	transform: translate(0%, 7%);
	width: 890px;
	height: auto;
	padding: 0px 32px 32px 32px;
	border-radius: 12px;
	background-color: white;
	
	&.response {
		top: 10vw;
	}

	.success-message {
		@include flex-row();
		padding-top: 28px;
		justify-content: space-around;
		column-gap: 16px;
	}

    & > div {
        display: flex;
        row-gap: 10px;
        flex-direction: column;
        justify-content: space-between;
    }

	& > div > div:nth-child(2) {
		@include flex-row();
		
		column-gap: 16px;
	}
}

.settings-schedule-base-block {

    .rc-calendar-cell{
        width: 74px;
        height: 34px;
        padding: 0px 2px 5px 2px;
    
        & > button {
            height: 32px;
            background-color: rgb(250, 250, 250)
        }
    }

    &.loading {
        height: 823px;
    }

    & > .errorBlock {
        color: red;
        text-align: center;

        &.margin-top {
            margin-top: 0px;
        }
    }

    & > div.title {
        @include header-style();
        @include flex-end();
        width: 556px;
        height: 44px;
    }

    @mixin slots-block {
        font-family: Manrope;
        font-size: 10px;
        font-weight: 700;
        line-height: 12px;
        letter-spacing: 0px;
        color: #32CD32;
    
        &.no-slots {
            color: rgba(60, 60, 67, 0.3);
        }
    }

    .upper-block {
        @include flex-row();
        column-gap: 10px;

        .working-hours-block {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            row-gap: 20px;

            & > .errorBlock {
                color: red;
                text-align: start;
        
                &.margin-top {
                    margin-top: 0px;
                }
            }
        }
    }

    .lower-block {
        .appointment-location-label {
            @include flex-row();
            align-items: center;
        }

        .select-clinic {
            width: 556px;
            padding: 8px 16px 8px 16px;
        }

        .description {
            width: 556px;
            padding: 8px 16px 8px 16px;
        }
    }

    .calendar-block {
        height: auto;

        .calendar-schedule-common {
            width: auto;
            box-shadow: none;
            border: none;
            background: rgba(250, 250, 250, 1);
        
            .rc-calendar-header {
                border: none;
        
                & > div {
                    position: relative;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    
                    & > .rc-calendar-next-year-btn, & > .rc-calendar-prev-year-btn {
                        display: none;
                    }

                    & > a {
                        text-decoration: none;
                    }
        
                    & > a:nth-child(1) {
                        position: relative;
                        left: 81%;
                    }
        
                    & > a:nth-child(2) {
                        position: relative;
                        left: 82%;
                    }
        
                    & > span {
                        position: relative;
                        right: 4%;
        
                        & > a {
                            font-family: Manrope;
                            font-size: 24px;
                            font-weight: 700;
                            line-height: 32px;
                            letter-spacing: 0em;
                            text-align: left;
                            text-decoration: none;
                        }
                    }
                }
            }
        
            .rc-calendar-body {
                padding: 0px 10px 10px;
                height: 284px;

                & > tr > td {
                    height: 13px;
                }
                .rc-calendar-cell{
                    width: 74px;
                    height: 25px;
                    padding: 0px 2px 5px 2px;
                
                    & > button {
                        height: 25px;
                        margin: 6px 0px 6px 0px;
                    }
                }
            }
        
            .rc-calendar-column-header {
                .rc-calendar-column-header-inner {
                    text-align: left;
                    padding: 8px;
                    font-family: Manrope;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 10px;
                    letter-spacing: 0px;	
                }
            }
        
            .current-date {				
                width: auto;
                height: auto;
                top: 8px;
                left: 9px;
                padding: 5px 10px 5px 9px;
                border-radius: 8px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
        
                @media screen and (max-width: 1466px) {
                    width: auto;
                    height: auto;
                    transition: width 0.2s ease-in-out;
                    transition: height 0.2s ease-in-out;
                    }
        
                & > div:nth-child(1) {
                    font-family: Manrope;
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 24px;
                    letter-spacing: 0px;
                    text-align: left;
                }
        
                &.other-month, &.unactive {
                    color: rgba(60, 60, 67, 0.3);
                }
        
                &.selected-day {
                    color: rgba(255, 255, 255, 1);
                    background-color: rgba(44, 121, 206, 1);
        
                    & > div:nth-child(2) {
                        @include slots-block;
                            
                        color: rgba(255, 255, 255, 1);
                        &.no-slots {
                            color: rgba(255, 255, 255, 1);
                        }
                    }
                }
        
                &.current-day {
                    top: 8px;
                    left: 9px;
                    padding: 2px 4px 2px 4px;
                    border-radius: 8px;
                    border: 1px solid rgba(44, 121, 206, 1);
                }
        
                & > div:nth-child(2) {
                    @include slots-block;
        
                    text-align: left;
                }
            }
        }
    }

    .grey-header {
        @include grey-header;
    }

    .time-picker-block {
        @include flex-row();
        flex-direction: column;
        row-gap: 12px;
        width: 556px;

        padding: 8px 16px 8px 16px;
        border-radius: 16px;

        &.empty {
            justify-content: flex-start;
            color:red;
        }

        .select-period-block {
            width: 50%;
            height: 34px;

            & > div > div {
                & > .MuiSelect-select:focus {
                    background-color: #FFFFFF
                }
            }
        }
    }

    .save-changes-block {
        @include flex-row();
        column-gap: 16px;
    }

    .controls-block{
        @include flex-row();
        flex-direction: column;
        justify-content: space-around;
        width: 556px;

        padding: 8px 16px 8px 16px;
        border-radius: 16px;
        row-gap: 12px;

        &.empty {
            justify-content: flex-start;
            color:red;
        }
    }

    .duration-block {
        width: 556px;
        height: 48px;
        padding: 8px 16px 8px 16px;

        &.empty {
            justify-content: flex-start;
            color:red;
        }

        & > div > div {
            & > .MuiSelect-select:focus {
                background-color: #FFFFFF
            }
        }
    }
}