@import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&display=swap');
@font-face {
  font-family: 'Kingsgmb';
  src: url('/fonts/kingsgmb.ttf') format('truetype');
}
@font-face {
  font-family: 'GeosansLight';
  src: url('/fonts/GeosansLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Kazesawa-Light';
  src: url('/fonts/Kazesawa-Light.woff') format('woff');
}
@font-face {
  font-family: 'Kazesawa-Regular';
  src: url('/fonts/Kazesawa-Light.woff') format('woff');
}
@font-face {
  font-family: 'Kazesawa-Semibold';
  src: url('/fonts/Kazesawa-Light.woff') format('woff');
}

/* event_edit.ejs */
.editEvent {
    display: inline-block;
    background-color:  #c0c0c0;
    padding: 10px;
    margin: 10px
}

/* schedule.ejs */
.schedule{
    white-space: nowrap
}
.page {
    display: inline-block;
    padding: 10px;
}
.weekDay-normal { background-color:  #e0e0e0; }
.weekDay-sat { background-color:  #e0e0ff; }
.weekDay-sun { background-color:  #ffe0e0; }
.mySVG {
    border: 1px solid #c0c0c0;
    width: 300px;
    height: 740px;
    background-color: #ffffff;
}
.timeIndex {
    font-family: 'GeosansLight', 'Kazesawa-Regular';
    font-weight: 700;
    font-size: 14px;
    fill: #000000;
    text-anchor: end;
    dominant-baseline: text-before-edge;
}
.eventType-sleep{fill: #0000b0}
.eventType-class{fill: #b00000}
.eventType-work{fill: #b0b000}
.eventType-study{fill: #00b000}
.eventType-meal{fill: #00b0b0}
.eventType-move{fill: #b000b0}
.eventType-break{fill: #e07000}
.eventType-others{fill: #707070}
.eventTitle {
    font-family: 'GeosansLight', 'Kazesawa-Regular';
    font-weight: 700;
    font-size-adjust: 0.5;
    font-size: 20px;
    fill: #ffffff;
    text-anchor: start;
    dominant-baseline: text-before-edge;
}
.halfDay{
    font-size: 20px;
}
.scheduleTitle{
    line-height: 2.0;
    font-size: 24px;
    margin-right: 4px;
}
.pageNum{
    line-height: 2.0;
    font-size: 16px; 
}
.square, .triangleL, .triangleR{
    display: inline-block;
    width: 32px;
    height: 32px;
    border: none;
    cursor: pointer;
}
.pagerPadding{
    font-size: 0;
    margin: 4px; 
}
.pageButton{ background:linear-gradient(to bottom, #ff4040, #800000); }
.pageButton2{ background:linear-gradient(to bottom, #4040ff, #000080); }
.square{
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.triangleL{
    clip-path: polygon(100% 0%, 50% 0%, 0% 50%, 50% 100%, 100% 100%, 50% 50%);
    margin-right: -8px;
}
.triangleR{
    clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 100%, 50% 50%);
    margin-left: -8px;
}

/* todo.ejs */
.task-container {
    position: relative;
    width: calc(512px + 64px);
    height: 64px;
    margin-bottom: 16px;
}
.task-frame{
    width: 512px;
    height: 64px;
    border: none;
    background-color: #d0d0d0;
    clip-path: polygon(
        calc(0% + 32px) 0%,
        calc(100% - 32px) 0%,
        100% 50%,
        calc(100% - 32px) 100%,
        calc(0% + 32px) 100%,
        0% 50%
    );
}
.task-deadline{
    position: absolute;
    width: calc(64px + 16px);
    height: calc(64px + 16px);
    left: -8px;
    top: -8px;
    border: none;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.task-type-class{ background:linear-gradient(to bottom, #ff40ff, #600060); }
.task-type-study{ background:linear-gradient(to bottom, #ff4040, #800000); }
.task-type-develop{ background:linear-gradient(to bottom, #40ff40, #008000); }
.task-type-others{ background:linear-gradient(to bottom, #40ffff, #006060); }
.task-deadline-text{
    position: absolute;
    font-size: 32px;
    top: 22px;
    left: 22px; 
    color: #ffffff;
}
.task-title-text{
    position: absolute;
    font-size: 24px;
    top: 32px;
    left: 80px; 
    color: #000000;
}
.task-done{
    position: absolute;
    width: calc(64px + 32px);
    height: 32px;
    right: 0px;
    top: 0px;
    border: none;
    cursor: pointer;
    background-color:#d0d0d0;
    clip-path: polygon(
        calc(0% + 6px) 0%,
        calc(100% / 3 * 2) 0%, 
        100% calc(100% - 2px), 
        calc(100% / 3 + 4px) calc(100% - 2px)
    );
}
.task-done-text{
    position: absolute;
    font-size: 16px;
    right: 8px;
    bottom: 0px;
}
.task-delete{
    position: absolute;
    width: calc(64px + 32px);
    height: 32px;
    right: 0px;
    bottom: 0px;
    border: none;
    cursor: pointer;
    background-color:#d0d0d0;
    clip-path: polygon(
        calc(100% / 3 + 4px) calc(0% + 2px),
        100% calc(0% + 2px), 
        calc(100% / 3 * 2) 100%, 
        calc(0% + 6px) 100%
    );
}
.task-delete-text{
    position: absolute;
    font-size: 16px;
    left: 16px;
    bottom: -2px;
}

/* tab.ejs */
.tab {
    display: inline-block;
    overflow: visible;
    height: 32px;
    font-size: 24px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    margin-right: -16px;
}
.tab-first{
    clip-path: polygon(
        0% 0%,
        calc(100% - 16px) 0%,
        100% calc(100% / 3 * 2),
        calc(100% - 8px) 100%,
        0% 100%
    );
}
.tab-next{
    clip-path: polygon(
        0% 0%,
        calc(100% - 16px) 0%,
        100% calc(100% / 3 * 2),
        calc(100% - 8px) 100%,
        calc(0% + 8px) 100%,
        calc(0% + 16px) calc(100% / 3 * 2)
    );
}
.bg-pst { background-color: #00d0d0;}
.bg-pst-dark { background-color: #003030;}
.bg-prs { background-color: #00d000;}
.bg-prs-dark { background-color: #003000;}
.bg-ftr { background-color: #d000d0;}
.bg-ftr-dark { background-color: #300030;}
.bg-byd { background-color: #ff0000;}
.bg-byd-dark { background-color: #300000;}

/*others*/
.font-geosans{
    font-family: 'GeosansLight', 'Kazesawa-Regular';
    font-weight: 700;
}