/* **************************************** *
 * Z_INDEX
 * header       99
 * bottom sheet 100
 * alert        102
 * toast        103
 * alertLogin   104
 * **************************************** */

/* alert */
.cds_alert{ visibility: hidden; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 102; width:100%; height:100%; touch-action: none; background-color: rgba(0,0,0,.0); touch-action: none; -ms-touch-action: none; transition: background .45s; }
.cds_alert .alert { opacity: 0; visibility: hidden; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); width: 100%; max-width: 312px; padding: 24px; border-radius: 5px; background-color: #fff; transition: background .45s cubic-bezier(0, 0, 0.29, 0.97); }
.cds_alert .alert .head { display: flex; justify-content: space-between; margin-bottom: 16px; }
.cds_alert .alert .body { display: flex; width: 100%; }
.cds_alert .alert .foot { display: flex; align-items: center; justify-content: flex-end; margin-top: 24px; }
.cds_alert .alert .foot button ~ button { margin-left: 24px; }

.cds_alert.open { visibility: visible; width: 100%; background-color: rgba(0,0,0,.4); transition: background .45s; }
.cds_alert.open .alert{ opacity: 1; visibility: visible; transition: background .45s; }

.cds_alert#alertLogin { z-index:104; }
.cds_alert#alertProfile { z-index:101; }


/* bottom sheet */
.cds_sheet { visibility: visible; position: fixed; left: 0; bottom: 0; z-index: 101; width: 100%; height:100%; transition: opacity 0.5s, visibility 0.5s; }
.cds_sheet[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; }
.cds_sheet .handlebar { padding: 16px 0; background: #fff; }
.cds_sheet .handlebar .bar { display: block; margin: 0 auto; width: 40px; height: 4px; background: #c2c2c2; border-radius: 5px; }
.cds_sheet .sheet__dimmed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: rgba(0,0,0,.4); }
.cds_sheet .sheet__contents { display: flex; flex-direction: column; position: fixed; bottom:0; left:0; overflow-y: hidden; max-height: calc(100% - 56px); transition: transform 0.5s, border-radius 0.5s; transform: translateY(0); width: 100%; background: #fff; }
.cds_sheet .sheet__contents:not(.not_selectable) { transition: transform 0.5s, border-radius 0.5s, height 0.5s; }
.cds_sheet .sheet__contents.full_screen { border-radius: 0; }
.cds_sheet .sheet__contents header { flex:1; }
.cds_sheet .sheet__contents main { height: 100%; padding:0 16px; overflow-y: auto; }
.cds_sheet .sheet__contents footer { flex:1; padding: 0 16px 16px; }
.cds_sheet .sheet__contents footer.gradient {
    position: absolute; bottom: 0; left: 0; z-index: 10; width: 100%; padding-top: 38px;
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 12%, rgba(255,255,255,0.8) 20%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 12%,rgba(255,255,255,0.8) 20%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 12%,rgba(255,255,255,0.8) 20%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
.cds_sheet .sheet__contents .title { position: relative; padding: 32px 38px 0 16px; }
.cds_sheet .sheet__contents .title .sheet__close { position: absolute; top:24px; right: 16px; }
.cds_sheet .sheet__contents .text { margin-bottom:4px; padding:0 16px; color:#a7a7a7; }
.cds_sheet[aria-hidden="true"] .sheet__contents { transform: translateY(100%); }

.cds_sheet .sheet__list { display: flex; flex-direction: column; position: relative; height: 100%; margin: 0 -16px; }
.cds_sheet .sheet__list > span { display: block; position: sticky; top:0; left:0; padding:8px 16px; color:#A7A7A7;  background: #fff; }
.cds_sheet .sheet__list > ul { padding-bottom: 158px; }
.cds_sheet .sheet__list .list__item { display:block; width:100%; padding: 16px; border-bottom: 1px solid #EDEDED; }
.cds_sheet .sheet__list .list__item.active { background-color: #FAFBFF; color:#0740E4; font-weight: 500; }

 /* bottom buttons */
.cds_buttons_sheet { visibility: hidden; position: fixed; top: 0; left: 0; z-index: 100; width:100%; height:100%; touch-action: none; -ms-touch-action: none; }
.cds_buttons_sheet .buttons_sheet__dimmed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: rgba(0,0,0,.4); }
.cds_buttons_sheet .buttons_sheet__content { opacity: 0; visibility: hidden; position: fixed; bottom:0; left: 0; width: 100%; padding: 16px; }
.cds_buttons_sheet .buttons_sheet__content .button { width:100%; height: 54px; line-height:54px; background:#fff; }
.cds_buttons_sheet .buttons_sheet__content .buttons { overflow:hidden; border-radius: 5px; margin-bottom:12px; }
.cds_buttons_sheet .buttons_sheet__content .buttons .button { border-radius: 0; }
.cds_buttons_sheet .buttons_sheet__content .buttons .button + .button { border-top:1px solid #EDEDED; }

.cds_buttons_sheet.open { visibility: visible; width: 100%; }
.cds_buttons_sheet.open .buttons_sheet__content { opacity: 1; visibility: visible; }


/* toast */
.cds_toast{ visibility: hidden; display: flex; position:fixed; top:0; left:0; z-index:103; width:100%; height:100%;  align-items: center; justify-content:center; }
.cds_toast .toast{ visibility: hidden; position: relative; bottom:15px; display: inline-block; padding:10px 24px; border-radius: 5px; background:rgba(0,0,0,.6); color:#fff; text-align: center;}
.cds_toast.open{ visibility: visible; }
.cds_toast.open .toast{ visibility: visible;  -webkit-animation: fadein 0.3s, fadeout 0.4s 1.7s; animation: fadein 0.3s, fadeout 0.4s 1.7s; }

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 15px; opacity: 1;}
}

@keyframes fadeout {
    from {bottom: 15px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 15px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 15px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}


/* cds__tooltip */
.cds__tooltip { position:relative; display: inline-block; }
.cds__tooltip .tooltip__content { position: absolute; bottom:100%; left:50%; margin-bottom:8px; transform: translateX(-50%); min-width: auto; padding: 0; white-space: nowrap; }
.cds__tooltip .tooltip__content .inbox { padding:12px 16px; background :#101010; border-radius: 5px; text-align: center; }
.cds__tooltip .tooltip__content .txt { color:#fff; }
.cds__tooltip .tooltip__button { position: relative; }
.cds__tooltip .tooltip__button:before { content: ""; display: block; position: absolute; bottom:100%; left: 50%; width: 0; height: 0; border-style: solid; border-width: 8px 6px 0 6px; border-color: #101010 transparent transparent transparent; transform: translateX(-50%); }
.cds__tooltip.hidden .tooltip__content,
.cds__tooltip.hidden .tooltip__button:before{ visibility: hidden; display: none; }

.cds__tooltip.to_top .tooltip__content { bottom: auto; top: 100%; margin: 8px 0 0 0; }
.cds__tooltip.to_top .tooltip__button:before { bottom: auto; top: 100%; transform: translateX(-50%) rotate(180deg); }