/* (A) GLOBAL */
/* (A1) PAGE TRANSITION */
@keyframes zoom-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes zoom-out{from{transform:scale(1)}to{transform:scale(0)}}::view-transition-old(zoom){animation:.2s linear both zoom-out}::view-transition-new(zoom){animation:.2s linear both zoom-in}

/* (A2) ICOMOON */
@font-face{font-family:icomoon;src:url(icomoon.woff) format('woff');font-weight:400;font-style:normal;font-display:block}[class*=" icon-"],[class^=icon-]{font-family:icomoon!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon-home3:before{content:"\e902"}.icon-pencil:before{content:"\e905"}.icon-image:before{content:"\e90d"}.icon-images:before{content:"\e90e"}.icon-camera:before{content:"\e90f"}.icon-headphones:before{content:"\e910"}.icon-music:before{content:"\e911"}.icon-play:before{content:"\e912"}.icon-dice:before{content:"\e915"}.icon-bullhorn:before{content:"\e91a"}.icon-connection:before{content:"\e91b"}.icon-feed:before{content:"\e91d"}.icon-mic:before{content:"\e91e"}.icon-file-empty:before{content:"\e924"}.icon-files-empty:before{content:"\e925"}.icon-file-text2:before{content:"\e926"}.icon-file-zip:before{content:"\e92b"}.icon-copy:before{content:"\e92c"}.icon-paste:before{content:"\e92d"}.icon-stack:before{content:"\e92e"}.icon-folder:before{content:"\e92f"}.icon-folder-open:before{content:"\e930"}.icon-folder-plus:before{content:"\e931"}.icon-folder-minus:before{content:"\e932"}.icon-folder-download:before{content:"\e933"}.icon-folder-upload:before{content:"\e934"}.icon-price-tag:before{content:"\e935"}.icon-barcode:before{content:"\e937"}.icon-qrcode:before{content:"\e938"}.icon-cart:before{content:"\e93a"}.icon-coin-dollar:before{content:"\e93b"}.icon-credit-card:before{content:"\e93f"}.icon-phone:before{content:"\e942"}.icon-address-book:before{content:"\e944"}.icon-envelop:before{content:"\e945"}.icon-pushpin:before{content:"\e946"}.icon-location:before{content:"\e947"}.icon-map:before{content:"\e94b"}.icon-history:before{content:"\e94d"}.icon-clock2:before{content:"\e94f"}.icon-alarm:before{content:"\e950"}.icon-bell:before{content:"\e951"}.icon-calendar:before{content:"\e953"}.icon-printer:before{content:"\e954"}.icon-keyboard:before{content:"\e955"}.icon-display:before{content:"\e956"}.icon-laptop:before{content:"\e957"}.icon-mobile:before{content:"\e958"}.icon-tablet:before{content:"\e95a"}.icon-floppy-disk:before{content:"\e962"}.icon-drive:before{content:"\e963"}.icon-database:before{content:"\e964"}.icon-undo:before{content:"\e965"}.icon-redo:before{content:"\e966"}.icon-undo2:before{content:"\e967"}.icon-redo2:before{content:"\e968"}.icon-forward:before{content:"\e969"}.icon-reply:before{content:"\e96a"}.icon-bubble:before{content:"\e96b"}.icon-user:before{content:"\e971"}.icon-users:before{content:"\e972"}.icon-user-plus:before{content:"\e973"}.icon-user-minus:before{content:"\e974"}.icon-user-check:before{content:"\e975"}.icon-quotes-left:before{content:"\e977"}.icon-quotes-right:before{content:"\e978"}.icon-hour-glass:before{content:"\e979"}.icon-spinner:before{content:"\e97a"}.icon-spinner11:before{content:"\e984"}.icon-search:before{content:"\e986"}.icon-zoom-in:before{content:"\e987"}.icon-zoom-out:before{content:"\e988"}.icon-enlarge:before{content:"\e989"}.icon-shrink:before{content:"\e98a"}.icon-enlarge2:before{content:"\e98b"}.icon-shrink2:before{content:"\e98c"}.icon-key:before{content:"\e98d"}.icon-lock:before{content:"\e98f"}.icon-unlocked:before{content:"\e990"}.icon-wrench:before{content:"\e991"}.icon-equalizer:before{content:"\e992"}.icon-cog:before{content:"\e994"}.icon-hammer:before{content:"\e996"}.icon-magic-wand:before{content:"\e997"}.icon-bug:before{content:"\e999"}.icon-pie-chart:before{content:"\e99a"}.icon-stats-dots:before{content:"\e99b"}.icon-stats-bars2:before{content:"\e99d"}.icon-gift:before{content:"\e99f"}.icon-glass:before{content:"\e9a0"}.icon-mug:before{content:"\e9a2"}.icon-rocket:before{content:"\e9a5"}.icon-meter:before{content:"\e9a6"}.icon-hammer2:before{content:"\e9a8"}.icon-fire:before{content:"\e9a9"}.icon-bin2:before{content:"\e9ad"}.icon-briefcase:before{content:"\e9ae"}.icon-airplane:before{content:"\e9af"}.icon-truck:before{content:"\e9b0"}.icon-shield:before{content:"\e9b4"}.icon-power:before{content:"\e9b5"}.icon-switch:before{content:"\e9b6"}.icon-power-cord:before{content:"\e9b7"}.icon-clipboard:before{content:"\e9b8"}.icon-list-numbered:before{content:"\e9b9"}.icon-list:before{content:"\e9ba"}.icon-list2:before{content:"\e9bb"}.icon-tree:before{content:"\e9bc"}.icon-menu:before{content:"\e9bd"}.icon-menu2:before{content:"\e9be"}.icon-cloud:before{content:"\e9c1"}.icon-cloud-download:before{content:"\e9c2"}.icon-cloud-upload:before{content:"\e9c3"}.icon-cloud-check:before{content:"\e9c4"}.icon-download2:before{content:"\e9c5"}.icon-upload2:before{content:"\e9c6"}.icon-download3:before{content:"\e9c7"}.icon-upload3:before{content:"\e9c8"}.icon-sphere:before{content:"\e9c9"}.icon-earth:before{content:"\e9ca"}.icon-link:before{content:"\e9cb"}.icon-flag:before{content:"\e9cc"}.icon-attachment:before{content:"\e9cd"}.icon-eye:before{content:"\e9ce"}.icon-eye-plus:before{content:"\e9cf"}.icon-eye-minus:before{content:"\e9d0"}.icon-eye-blocked:before{content:"\e9d1"}.icon-bookmark:before{content:"\e9d2"}.icon-star-empty:before{content:"\e9d7"}.icon-star-half:before{content:"\e9d8"}.icon-star-full:before{content:"\e9d9"}.icon-heart:before{content:"\e9da"}.icon-heart-broken:before{content:"\e9db"}.icon-smile2:before{content:"\e9e2"}.icon-sad2:before{content:"\e9e6"}.icon-warning:before{content:"\ea07"}.icon-notification:before{content:"\ea08"}.icon-question:before{content:"\ea09"}.icon-plus:before{content:"\ea0a"}.icon-minus:before{content:"\ea0b"}.icon-info:before{content:"\ea0c"}.icon-cancel-circle:before{content:"\ea0d"}.icon-blocked:before{content:"\ea0e"}.icon-cross:before{content:"\ea0f"}.icon-checkmark:before{content:"\ea10"}.icon-enter:before{content:"\ea13"}.icon-exit:before{content:"\ea14"}.icon-play3:before{content:"\ea1c"}.icon-pause2:before{content:"\ea1d"}.icon-stop2:before{content:"\ea1e"}.icon-backward2:before{content:"\ea1f"}.icon-forward3:before{content:"\ea20"}.icon-first:before{content:"\ea21"}.icon-last:before{content:"\ea22"}.icon-previous2:before{content:"\ea23"}.icon-next2:before{content:"\ea24"}.icon-eject:before{content:"\ea25"}.icon-volume-high:before{content:"\ea26"}.icon-volume-medium:before{content:"\ea27"}.icon-volume-low:before{content:"\ea28"}.icon-volume-mute:before{content:"\ea29"}.icon-volume-mute2:before{content:"\ea2a"}.icon-volume-increase:before{content:"\ea2b"}.icon-volume-decrease:before{content:"\ea2c"}.icon-loop:before{content:"\ea2d"}.icon-loop2:before{content:"\ea2e"}.icon-arrow-up:before{content:"\ea32"}.icon-arrow-right:before{content:"\ea34"}.icon-arrow-down:before{content:"\ea36"}.icon-arrow-left:before{content:"\ea38"}.icon-circle-up:before{content:"\ea41"}.icon-circle-right:before{content:"\ea42"}.icon-circle-down:before{content:"\ea43"}.icon-circle-left:before{content:"\ea44"}.icon-move-up:before{content:"\ea46"}.icon-move-down:before{content:"\ea47"}.icon-sort-alpha-asc:before{content:"\ea48"}.icon-sort-alpha-desc:before{content:"\ea49"}.icon-sort-numeric-asc:before{content:"\ea4a"}.icon-sort-numberic-desc:before{content:"\ea4b"}.icon-sort-amount-asc:before{content:"\ea4c"}.icon-sort-amount-desc:before{content:"\ea4d"}.icon-checkbox-checked:before{content:"\ea52"}.icon-checkbox-unchecked:before{content:"\ea53"}.icon-radio-checked:before{content:"\ea54"}.icon-radio-checked2:before{content:"\ea55"}.icon-radio-unchecked:before{content:"\ea56"}.icon-make-group:before{content:"\ea58"}.icon-scissors:before{content:"\ea5a"}.icon-filter:before{content:"\ea5b"}.icon-table2:before{content:"\ea71"}.icon-insert-template:before{content:"\ea72"}.icon-embed:before{content:"\ea7f"}.icon-embed2:before{content:"\ea80"}.icon-terminal:before{content:"\ea81"}.icon-share2:before{content:"\ea82"}.icon-google:before{content:"\ea88"}.icon-facebook:before{content:"\ea90"}.icon-youtube:before{content:"\ea9d"}.icon-github:before{content:"\eab0"}.icon-pinterest:before{content:"\ead1"}.icon-paypal:before{content:"\ead8"}.icon-file-pdf:before{content:"\eadf"}.icon-file-word:before{content:"\eae1"}.icon-file-excel:before{content:"\eae2"}.icon-libreoffice:before{content:"\eae3"}.icon-html-five:before{content:"\eae4"}
.ico{font-size:24px}.ico-sm{font-size:16px}

/* (A3) WHOLE PAGE */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
body {
  position: relative;
  padding: 0; margin: 0;
  overflow-x: hidden;
}

/* (A4) COLORS */
:root {
  --bg-color-a: #3b39af; /* page header + form label */
  --bg-color-b: #404040; /* calendar header */
  --bg-color-c: #d73a3a; /* buttons */
}

/* (B) SHARED POPUP */
#calForm, #aboutWrap {
  position:absolute; top: 0; left: 0; z-index: 999;
  width: 100vw; height: auto; min-height: 100vh;
  padding: 0; margin: 0; border: 0;
  background: rgba(0,0,0,0.5);
  view-transition-name: zoom;
}
#calForm:is([open]), #calForm form, #aboutWrap:is([open]) {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
}
#evtCX, #aboutCX {
  position: absolute; top: 5px; right: 5px;
  padding: 10px;
  font-size: 30px; font-weight: 700; color: var(--bg-color-c);
  cursor: pointer;
}

/* (C) PERIOD SELECTOR */
#calHead, #calPeriod {
  display: flex; align-items: stretch;
}
#calHead {
  padding: 15px;
  background: var(--bg-color-a);
}
#calPeriod { flex-grow: 1; }
#calHead button, #calHead input, #calHead select {
  font-size: 24px; color: #fff;
  border: 0; outline: none; background: 0;
  cursor: pointer;
}
#calMonth { margin: 0 10px; }
#calMonth option { color: #000; }
#calYear { width: 90px; }
#calHead #calAdd {
  font-size: 16px;
  padding: 10px 20px;
  background: var(--bg-color-c);
}

/* (C) CALENDAR */
/* (C1) ROWS */
#calDays, .calRowHead, .calRowBack { display: flex; }
#calDays, .calRow, .calRowHead, .calRowEvt {
  position: relative;
  width: 100%;
}
.calRow { min-height: 100px; }
.calRowHead, .calRowEvt { z-index: 2; }
.calRowBack {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 100%; height: 100%;
}
.calRowEvt {
  padding: 3px 10px; margin-top: 5px;
  font-size: 12px; white-space: nowrap; text-overflow: ellipsis;
  overflow: hidden; cursor: pointer;
  border-radius: 10px;
}

/* (C2) CELLS & EVENTS */
.calCell { width: 14.2857%; }
.w1 { width: 14.2857%; } .w2 { width: 28.5714%; } .w3 { width: 42.8571%; }
.w4 { width: 57.1428%; } .w5 { width: 71.4285%; } .w6 { width: 85.7142%; }
.w7 { width: 100%; }
.o1 { left: 14.2857%; } .o2 { left: 28.5714%; } .o3 { left: 42.8571%; }
.o4 { left: 57.1428%; } .o5 { left: 71.4285%; } .o6 { left: 85.7142%; }
#calDays .calCell {
  color: #fff; background: var(--bg-color-b);
  font-weight: 700; text-align: center;
  padding: 15px 0;
}
.calRowHead .calCell {
  font-size: 14px; font-weight: 700;
  color: #b5b5b5;
  padding: 5px;
}
.calRowHead .calCellDay:hover {
  color: #ff5b5b;
  cursor: pointer;
}
.calRowBack .calCell { border: 1px solid #f5f5f5; }
.calBlank { background: #f5f5f5; }
.calToday { background: #feffd3; }

/* (D) EVENT FORM */
#calForm form {
  position: relative;
  width: 450px; padding: 15px;
  border-radius: 10px;
  background: #fff;
}
#calForm h2 { margin: 0 0 5px 0; }
#calForm .evt50 { width: 50%; }
#calForm .evt100 { width: 100%; }
#calForm .evt50, #calForm .evt100 { padding: 8px; }
#calForm label, #calForm input[type=datetime-local], #calForm input[type=color], #calForm input[type=text] {
  display: block;
  width: 100%;
}
#calForm label {
  color: #a1a1a1;
  font-size: 12px;
  margin-bottom: 5px;
}
#calForm input[type=datetime-local], #calForm input[type=text] {
  padding: 5px;
  border: 1px solid #eee;
  background: #f5f5f5;
}
#calForm input[type=color] { height: 30px; border: 0; }
#calForm button {
  border: 0; padding: 10px 20px; margin: 10px 2px 0 0;
  color: #fff; background: var(--bg-color-c);
  cursor: pointer; font-size: 16px;
}

/* (X) ABOUT */
#aboutFoot {
  padding : 20px 0;
  font-size: 14px; font-weight: 700;
  text-align: center; color: #9b9b9b;
  cursor: pointer;
}
#aboutWrap:is([open]) #aboutPop {
  position: relative; padding: 20px;
  background: #fff;
}
#aboutCX {
  border-radius: 50%;
  background: #fff;
}
#aboutHead {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}
.aboutTitle {
  color: var(--bg-color-c);
  margin-bottom: 5px;
}
.aboutSection {
  border: 1px solid #e1e1e1; background: #f5f5f5;
  padding: 10px;
}
.aboutSection ul { margin-left: 30px; padding: 0; }
.aboutSection ul li { margin: 10px 0; }
.aboutBtn {
  display: inline-block;
  padding: 10px; margin: 3px;
  text-decoration: none;
  color: #fff; background: var(--bg-color-c);
}