body {font-family: 'Source Code Pro', monospace; color:#333333; background-color:#240046; font-size: 13px;}

/*Light 300
Regular 400
Semi-bold 600
Bold 700*/

:root {
    --background: #FF6D00;
    --background: #FF7900;
    --background: #FF8500;
    --background: #FF9100;
    --background: #FF9E00;
    --background: #240046;
    --background: #3C096C;
    --background: #5A189A;
    --background: #7B2CBF;
    --background: #9D4EDD;
}

h1, h2, h3, h4, h5, h6 {letter-spacing:-1px; font-weight: 400;}

select:invalid { color: #C9CBCE; }

.ttupp {text-transform: uppercase;}

#formLogin {color:#fff; margin-top:40px;}
#formLoginForm {background-color: #3C096C; padding:8px 15px;}
#formLoginForm label {color: #FF8500;}
#formLoginForm .todoButton {width:100%; font-size:14px; padding:6px;}


#header {display: flex; justify-content: space-between; align-items: center; padding:6px 0;}
.header_brand {color:#9D4EDD;}
.header_brand span {color:#FF9100;}
.header_menu {display: flex; align-items: center;}
.header_menu button, .header_menu a {margin-left:4px; background-color: #3C096C; color:#9D4EDD; font-size:11px; font-weight: 300; border:1px solid #9D4EDD; line-height: 1; padding:4px 4px; display:block;}

#todo_header {display:flex; justify-content: space-between; margin:10px 0;}

    .todo_header_mid {display: flex; align-items: center;}
    .todo_header_col {display: flex; align-items: center;}
    .todo_header_left button {margin-right:4px;}
    .todo_header_right button {margin-left:4px;}

    .th_tit {font-size:11px; color:#9D4EDD; text-align: left;}
    .th_tit span {display:block; color:#FF9E00;}
    .date_act {}
    .date_act button {background-color: #5A189A; color:#FF6D00; font-size:13px; font-weight: 300; border:1px solid #FF6D00; line-height: 1; padding:4px 4px;}
    .date_act button.active {background-color: #FF6D00; color:#5A189A; border:1px solid #5A189A;}
    .date_act button span {font-size:12px; font-weight: 300; padding:1px; border-radius: 2px; margin-left: 4px;}
    .date_act button:disabled {cursor:default; opacity:.3;}

#todo {margin-top:0px; position:relative; padding-top:10px; padding-bottom: 10px;}
#todo_loading {position:absolute; top:0; bottom:0; left:0; right:0; background-color:rgba(0, 0, 0, .9); display:flex; align-items: center; justify-items: center;     justify-content: center; z-index:90;}

#loadingAnim {border: 8px solid #3C096C; border-top: 8px solid #FF9100; border-radius: 50%; width: 48px; height: 48px; animation: spin 2s linear infinite;}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

.todo_tit {font-size:11px; color:#FF6D00; padding-bottom:3px; border-bottom: 1px solid #FF9E00; margin-bottom:6px;}
.todo_item {display:flex; width:100%; border:1px solid #3C096C; border-left:4px solid #9D4EDD; height:34px;margin-bottom:12px; justify-content: space-between; background-color:#5A189A;} 

.todo_item_on {opacity:.4;}


.ti_left {display:flex; }
.ti_right {display:flex;}

.ti_act {padding-left:2px; display:flex; align-items: center;}
.ti_act button {height:28px; width:28px; border:2px solid #3C096C;}
.ti_act button.off {background-color: #7B2CBF; background-image: none;}
.ti_act button.on {background-color: #5A189A; background-image: url(../img/right.png); background-size:22px 22px; background-repeat: no-repeat; background-position: center center;}

@media (hover: hover) {
    .ti_act button.on:hover {background-color: #7B2CBF; background-image: none;}
    .ti_act button.off:hover {background-color: #5A189A; background-image: url(../img/right.png); background-size:22px 22px; background-repeat: no-repeat; background-position: center center;}
}


.ti_name {padding-left:6px; font-size:14px; color:#fff; display:flex; align-items: center; line-height: 1; font-weight: 300;}
.ti_redo {padding-left:6px; font-size:12px; color:#fff; display:flex; align-items: center; line-height: 1; font-weight: 300;}
.ti_last {text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; padding:0 10px 0 0; min-width: 56px;}
.ti_last_days {border-radius: 50%; font-size:10px; background-color:#240046; color:#fff; width:20px; height:20px; display:flex; align-items: center; justify-content: center;}
.ti_last span {display:block; margin-top:-5px; font-size:9px; color:#fff;}
.ti_menu {/*background-color: green; background-image: url('../img/3dots.svg'); background-size: auto 22px; background-repeat: no-repeat; background-position: center center;*/ width:12px; display: flex; align-items: center; justify-content: center; position:relative;}
    .ti_m_toggle {padding:0; border:0; border:0; background-color: transparent; display:flex; flex-direction: column; justify-content: space-between; height:22px; width:6px; }
    .ti_m_toggle span {display:block; width:5px; height:5px; background-color: #9D4EDD;}
    .ti_m_btns {display: flex; align-items: center; background-color: #5A189A; position:absolute; top:0; bottom:0; right:2px; width:92px; opacity:0; transition: all .3s; z-index:-1;}
    .ti_m_btns.show {right:18px; opacity:1; z-index:1;}
    .ti_m_btns button {padding:0; margin:0; border:0; background-color:#FF8500; color:#fff;height: 26px; width:26px; margin-left:4px; font-size:14px;}

.todo_item.todo_item_alert_on {box-shadow: 0 0 0 rgba(255,158,0, 0.4); animation: pulse 2s infinite;}
.todo_item.todo_item_alert_on .ti_last_days {background-color: #FF8500;}


#nT_date_w {display: none;}

.modal-content {background-color: #3C096C;}
.modal-title {color:#FF6D00;}
.modal .close {color:#FF6D00;}
.modal label {color:#FF6D00;}
.modal-header {border-bottom:1px solid #240046;}
.modal-body {color:#fff;}

.todoButton {background-color: #FF6D00; color:#240046; border:1px solid #3C096C;}
#newTaskCta, #delTaskCta, #editTaskCta {width: 100%;}


#points {margin-top:10px;}
.points_container {width: 100%; border-bottom: 1px solid #3C096C;}
.points_tit {font-size:10px; color:#fff; font-weight: 300; line-height: 1; position:absolute; top:50%; left:4px; transform:translateY(-50%);}
.points_per {font-size:10px; color:#fff; font-weight: 300; line-height: 1; position:absolute; top:50%; right:4px; transform:translateY(-50%);}

#points .progress {height:16px; border-radius: 0; position:relative; background-color:#9D4EDD;}
#points .progress-bar {background-color:#5A189A;}




@-webkit-keyframes pulse {
0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,158,0, 0.8);
}
70% {
    -webkit-box-shadow: 0 0 0 10px rgba(255,158,0, 0);
}
100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255,158,0, 0);
}
}
@keyframes pulse {
0% {
    -moz-box-shadow: 0 0 0 0 rgba(255,158,0, 0.8);
    box-shadow: 0 0 0 0 rgba(255,158,0, 0.8);
}
70% {
    -moz-box-shadow: 0 0 0 10px rgba(255,158,0, 0);
    box-shadow: 0 0 0 10px rgba(255,158,0, 0);
}
100% {
    -moz-box-shadow: 0 0 0 0 rgba(255,158,0, 0);
    box-shadow: 0 0 0 0 rgba(255,158,0, 0);
}
}