:root {
    --Sp-Main-Color: white;
    --Sp-Accent-Color: #9332A9;
    --Sp-Accent-Sub-Color: #aa16cb;
    --Sp-Gradation-BackGround-Color: linear-gradient(177.6deg, #F9F1F4 1.13%, #EDDEF0 99.43%), #FFFFFF;
    --Sp-Gradation-BackGround-Dialog-Color: linear-gradient(177.6deg, #F9F1F4 1.13%, #EDDEF0 99.43%), #FFFFFF;
    --Sp-Gradation-BackGround-Login-Back: linear-gradient(0deg, #E8BEE8 0%, #ECD2EC 0.01%, #FFF4F7 100%);
    --Sp-Main-Panel-Color: white;
    --Sp-Side-Panel-Color: linear-gradient(177.6deg, #F9F1F4 1.13%, #EDDEF0 99.43%), #FFFFFF;
    --Sp-Menubar-Divider-Color: #E5E5E5;
    --Sp-Menubar-Button-Border-Color: #8A8886;
    --Sp-Menubar-Button-Hover-Color: rgba( 0, 0, 0, 0.05);
    --Sp-Menubar-Button-Active-Color: #8a8886;
    --Sp-Menubar-Button-Selected-Color: rgba( 0, 0, 0, 0.1);
    --Sp-Menubar-Background-Color: white;
    --Sp-Menubar-Icon-Color: #605e5c;
    --Sp-Font-Yotei-Create-Button-Color: white;
    --Sp-Font-Yotei-Create-Button-BackGroundColor: #9332A9;
    --Sp-Gray-Border: #DFDEDE;
    --Sp-Gray-Border2: #DFDEDE;
    --Sp-Font-Main-Color: black;
    --Sp-Font-Accent-Color: #9332A9;
    --Sp-Scroll-Bar-Color: rgba(0,0,0,0.2);
    --Sp-Disabled-Text-Color: #030303;
    --Sp-Disabled-Text-BackgroundColor: #FFFFFF;
    --Sp-Disabled-Switch-Color: #000000;
    --Sp-Disabled-Switch-BackgroundColor: #fff;
    --Sp-Disabled-Switch-Border-Color: #c8c6c4;
    --Sp-Disabled-Switch-Inner-On-Color: #a19f9d;
    --Sp-Disabled-Switch-Inner-On-BackgroundColor: #606060;
    --Sp-Disabled-Switch-Inner-Off-Color: #000000;
    --Sp-Disabled-Switch-Inner-Off-BackgroundColor: #fff;
    --Sp-Disabled-Switch-Inner-Off-Border-Color: #c8c6c4;
    --Sp-Disabled-Switch-Handle-BackgroundColor: #c8c6c4;
    --Sp-Disabled-Switch-Handle-Active-BackgroundColor: #faf9f8;
    --Sp-Checkbox-Border-Color: #323130;
    --Sp-AppointmentScheduler-Holiday: #faf9f8;
    --Sp-AppointmentScheduler-Holiday-selected: #e9e8e7;
    --Sp-AppointmentScheduler-Holiday-hover: #f3f2f1;
    --Sp-AppointmentCalendar-Sunday: #dc3545;
    --Sp-AppointmentCalendar-Saturday: #0079f3;
    --Sp-AppointmentCalendar-Holiday: #dc3545;
    --Sp-AppointmentCalendar-BackGround: #b511485e;
    --Sp-AppointmentAttachment-BackgroundColor: #efefef;
    --Sp-AppointmentSpinner-BonderColor: transparent;
    --Sp-AppointmentSpinner-BonderBottomColor: rgb(147, 50, 169);
}

.menu-divider {
    height: 100%;
    width: 1px;
    margin-left: 4px;
    margin-right: 4px;
    background-color: var(--Sp-Menubar-Divider-Color);
}

.menu-button {
    border: none;
    background-color: white;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: fit-content;
    cursor: pointer;
    border-radius: 2px;
    user-select: none;
    font-size: 0.8rem;
    padding: 0px 8px;
}

    .menu-button:hover {
        background-color: var(--Sp-Menubar-Button-Hover-Color);
    }

    .menu-button:active {
        background-color: var(--Sp-Menubar-Button-Active-Color);
        border: none;
    }

.menu-toggle {
    border: none;
    background: rgba(0,0,0,0);
    color: var(--Sp-Font-Main-Color);
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: fit-content;
    cursor: pointer;
    border-radius: 2px;
    user-select: none;
    font-size: 0.8rem;
    padding: 0px 13px 0px 8px;
}

    /*トグルに適用*/
    .menu-toggle div {
        margin-left: 5px;
    }

    .menu-toggle:hover {
        background-color: var(--Sp-Menubar-Button-Hover-Color);
    }

    .menu-toggle:active {
        background: var(--Sp-Menubar-Button-Active-Color);
        border: none;
    }

.x-button {
    border-radius: 4px;
    margin-left: auto;
    height: 1.1rem;
    width: 1.1rem;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .x-button:hover {
        background: rgba(0,0,0,0.1);
    }

.dialog-panel {
    height: 80vh;
    width: 60vw;
    background: var(--Sp-Gradation-BackGround-Dialog-Color);
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0px 6px 15px 6px rgba(0,0,0,0.2);
}

.gray-out {
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(44,44,44, 0.4);
    transition: all 0.2s;
}

mgt-people-picker {
    --input-border-color--focus: var(--Sp-Accent-Color);
}

.title-row label {
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

fluent-text-field {
    --neutral-foreground-rest: var(--Sp-Font-Main-Color);
    --neutral-fill-input-rest: var(--Sp-Main-Panel-Color);
    --neutral-fill-input-hover: #fbfbfb;
    --neutral-fill-input-focus: white;
    --neutral-stroke-rest: #dadada;
    --neutral-stroke-hover: #cacaca;
    --neutral-stroke-active: #e5e5e5;
    --neutral-stroke-focus: #dadada;
    --neutral-stroke-input-rest: linear-gradient(#f3f3f3 calc(100% - 1px), #969696 calc(100% - 1px), #969696);
    --neutral-stroke-input-hover: linear-gradient(#ebebeb calc(100% - 1px), #8e8e8e calc(100% - 1px), #8e8e8e);
}

/* アイコン */
.e-custom-icon {
    height: 20px !important;
    background-repeat: no-repeat;
}

.e-custom-meeting-tentative {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg fill='%23605e5c' xmlns='http://www.w3.org/2000/svg' viewBox='4 4 20 24'%3E%3Cpath d='M14 4C10.6877 4 8 6.68772 8 10C8 10.5523 8.44772 11 9 11C9.55228 11 10 10.5523 10 10C10 7.79228 11.7923 6 14 6C16.2077 6 18 7.79228 18 10C18 11.0627 17.7405 11.7418 17.3881 12.2674C17.0284 12.8039 16.5527 13.2197 15.9458 13.75L15.8415 13.8412C15.2147 14.3896 14.4785 15.051 13.9204 15.995C13.3498 16.9603 13 18.1558 13 19.75V20C13 20.5523 13.4477 21 14 21C14.5523 21 15 20.5523 15 20V19.75C15 18.4692 15.2752 17.6335 15.6421 17.0128C16.0215 16.3709 16.5353 15.8916 17.1585 15.3463C17.2055 15.3052 17.2534 15.2635 17.302 15.2212C17.8676 14.7287 18.5361 14.1467 19.0494 13.3811C19.6345 12.5082 20 11.4373 20 10C20 6.68772 17.3123 4 14 4ZM14 25.25C14.6904 25.25 15.25 24.6904 15.25 24C15.25 23.3096 14.6904 22.75 14 22.75C13.3096 22.75 12.75 23.3096 12.75 24C12.75 24.6904 13.3096 25.25 14 25.25Z' fill='%23605e5c' /%3E%3C/svg%3E");
}