@import "../../../../assets/sass/global.scss";
@import "../../../../assets/sass/core/vars.scss";
//---------------------------------------------- TIME PICKER INPUTS ----------------------------------------

.gtc-rc-timePicker-range-modal-inputs-wrap {
    display: flex;
    align-items: center;

    .timePicker-inputs-icon{
        padding: 1px 3px 0px 0px;
    }

    .react-select__single-value{
        font-size: 22px;
        color: #909090;
    }

    .react-select__menu {
        padding: 1px;
    }

    .react-select__option {
        font-size: 16px ;
        padding: 8px 8px 8px 16px;
    }

    .timePicker-inputs-time{
        text-align: center;
        width: 44px;
        height: 34px;
    
        font-size: 25px;
        font-weight: 400;
        font-style: normal;
    
        border: 1px solid hsl(0, 0%, 80%);
        border-radius: 3px;
        color: #909090;

        &:hover {
            border: 1px solid hsl(0, 0%, 70%);
        }
    
        &:focus {
            outline: 0 none;
            border: 1px solid $color-outline;
            box-shadow: 0px 0px 4px $color-outline;
        } 
    }

    .timePicker-inputs-label {
        padding: 0px 3px 0px 3px;
        font-size: 20px;
        font-weight: 700;
        align-self: center !important;
    }
    
    .timePicker-inputs-AmPmSelect{
        margin-left: 6px;
        height: 38px;
    
        &:focus {
            outline: 0 none;
            border: 1px solid $color-outline;
            box-shadow: 0px 0px 4px $color-outline;
        } 
    }
}

//---------------------------------------------- TIME PICKER SELECTS ----------------------------------------

.gtc-rc-timePicker-range-modal-selects-wrap {
    display: flex;
    align-items: center;

    .form-item {
        padding-top: unset;
    }

    .react-select__menu {
        padding: 1px;
    }

    .timePicker-selects-time{
        text-align: center;
        min-width: 50px;
        height: 100%;
    
        &:focus {
            outline: 0 none;
            border: 1px solid $color-outline;
            box-shadow: 0px 0px 4px $color-outline;
        } 

        .react-select__single-value{
            font-size: 25px;
            color: #909090;
        }

        .react-select__option {
            font-size: 16px ;
            padding: 8px 8px 8px 10px;
        }
    }

    .timePicker-selects-label {
        padding: 0px 3px 0px 3px;
        font-weight: 700;
        font-size: 20px;
        align-self: center !important;
    }
    
    .timePicker-selects-AmPmSelect{
        margin-left: 6px;
        min-width: 56px;
    
        &:focus {
            outline: 0 none;
            border: 1px solid $color-outline;
            box-shadow: 0px 0px 4px $color-outline;
        } 

        .react-select__single-value{
            font-size: 22px;
            color: #909090;
        }

        .react-select__option {
            font-size: 16px ;
            padding: 8px 8px 8px 16px;
        }
    }
}