:root {
    --primary: #ff6230;
    --primary-low: #ff623055;
    --info: #638ec9;
    --success: #059669;
    --failed: #DC2626;
    --warning: #D97706;
}
/* ------------------------------------ 
* REPLACE
* ------------------------------------ */
.btn {
    border-radius: 4px;
}

.site-header-nav {
    border-bottom: 1px solid #393939;
}

.site-navigation-menu li a {
    padding-left: 15px;
    padding-right: 15px;
}
/* --------------------- */

.text-oneline-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* .card-media{
    background-color: #ccc;
    min-height: 50px;
}
*/
md-icon > img {
    max-width: 24px;
    max-height: 24px;
    display: block;
}

.no-text-transform {
    text-transform: none;
}

/* ------------------------------------ 
* MD Toolbar Tool
* ------------------------------------ */

/* Disable Auto Uppercase di button yang berada pada nav-header */
.md-toolbar-tools .md-button {
    text-transform: none;
}

.md-toolbar-icon {
    margin-right: 10px;
}

/* Best view: gabungkan dengan .form-control */
.md-toolbar-tools input.md-toolbar-input {
    background: #f4f4f4; 
    border-radius: 5px; 
    padding-left: 20px; 
    padding-right: 20px;
    border: 1px solid transparent;
}
.md-toolbar-tools input.md-toolbar-input:focus {
    border-color: #ddd;
    /* box-shadow: 0 0 0px 3px var(--primary-low); */
    background-color: white;
}

.md-toolbar-divider {
    margin: 0 15px;
    border-left: 1px solid #eaeaea;
    min-height: 30px;
}


/* ------------------------------------ 
* PRODUK: Collection Details
* ------------------------------------ */

.thumbnails-preview {
    cursor: pointer;
    width: 50px;
    height: 50px;
    position: relative;
    box-shadow: 0 0 0 1px #ddd;
    display: block;
}
.thumbnails-preview > img {
    display: block;
    width: 50px;
    height: 50px;
}
.thumbnails-preview > .thumbnails-count {
    position: absolute; 
    bottom: 2px; 
    right: 2px; 
    background: rgba(0,0,0,.5); 
    color: white; 
    padding: 2px 5px; 
    font-size: 10px;
    border-radius: 5px;
    min-height: 18px;
    min-width: 18px;
    text-align: center;
}
.no-thumbnails-preview {
    background-color: #eee;
    display: flex;
    align-items: center;
    text-align: center;
}
.no-thumbnails-preview md-icon {
    display: block;
    color: white; 
    font-size: 50px; 
    width: 50px; 
    height: 50px; 
    cursor: default;
}


/* ------------------------------------ 
* Process Logs
* ------------------------------------ */

.process_logs > .item {
    display: table-row;
}
.process_logs > .item > .date {
    display: table-cell;
    white-space: nowrap;
}
.process_logs > .item > .message { display: table-cell; white-space: pre-wrap;}
.process_logs > .item.info > .message {color: inherit}
/* .process_logs > .item.success > .message {color: #1fdc13;} */
.process_logs > .item.success > .message {color: var(--success);}
/* .process_logs > .item.failed > .message {color: #e91e1e;} */
.process_logs > .item.failed > .message {color: var(--failed);}
/* .process_logs > .item.warning > .message {color: #FF5722;} */
.process_logs > .item.warning > .message {color: var(--warning);}
.process_logs > .item.focus .message {font-weight: bold; position: relative;}
.process_logs > .item.focus .message:before {
    content: "\2023";
    margin-left: -10px;
    position: absolute;
}

/* ------------------------------------ 
* Animations
* ------------------------------------ */

.spin { 
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.blink {
    -webkit-animation:fade 1000ms infinite;
    -moz-animation:fade 1000ms infinite;
    animation:fade 1000ms infinite;
}
@-webkit-keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.2; } to { opacity: 1.0; } }                                                                                                                                                                                                           
@-moz-keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.2; } to { opacity: 1.0; } }                                                                                                                                                                                                           
@keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.2; } to { opacity: 1.0; } }                                                                                                                                                                                                           


@-webkit-keyframes blinker { 50% { opacity: 0; } }
@-moz-keyframes blinker { 50% { opacity: 0; } }
@keyframes blinker { 50% { opacity: 0; } }



.md-table-pagination>*{
    height: 40px;
}
.md-toolbar-tools .title:first-child {
    padding-left: 0;
}
md-tooltip.md-default-theme ._md-content, md-tooltip ._md-content {
    background-color: rgba(0, 0, 0, 0.77);
}

md-tooltip.auto_height ._md-content {
    height: auto!important;
    line-height: 1.4em;
    padding: 5px 10px;
}

/* ------------------------------------ 
* Icon Left Navigation
* ------------------------------------ */

.icon-navigation {
    width: 66px;
    z-index: 9;
    background: #F2F2F2;
    text-align: center;
    border-right: 1px solid #d3d3d3;
    overflow: hidden;
}
.icon-navigation:hover {
    overflow: overlay;
}
.icon-navigation-brand {
    height: 64px; 
    padding-top: 15px;
    margin-bottom: 10px;
}
.icon-navigation-buttons {
    padding: 5px;
}

.icon-navigation-buttons > .item {
    margin-bottom: 20px;
}

.icon-navigation-buttons .md-button.md-icon-button {
    border-radius: 5px;
}


/* ------------------------------------ 
* Table Header Sticky
* ------------------------------------ */
table.md-table.table-header-sticky {
    overflow: auto;
    position: relative;
}
table.md-table.table-header-sticky > thead > tr > th {
    position: sticky;
    top: 0;
    background: #fafafa;
    z-index: 1;
    border-bottom: 1px solid #e1e1e1;
}
table.md-table.table-header-sticky > tbody > tr:first-child > td[md-cell] {
    border-top-width: 0;
}

/* ------------------------------------ 
* Scrollbars
* ------------------------------------ */


::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
/* Track */
::-webkit-scrollbar-track {
    background: #eee;
    border: 1px solid #ddd;
    border-radius: 16px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #777;
}


/* ------------------------------------ 
* Simple TExt navigation
* ------------------------------------ */


.simple-text-nav > a {
    display: inline-block;
    margin-right: 15px;
}
.simple-text-nav > a.active {
    font-weight: bold;
    color: black!important;
}

/* ------------------------------------ 
* Tool Icon Box
* ------------------------------------ */
.tool_icon_box {
    position: relative;
    width: 160px; 
    margin: 10px;
    text-align: center;
    padding: 15px;
    border-radius: 5px;
    overflow: hidden;
}
.tool_icon_box a{
    text-decoration: none;
}
.tool_icon_box-title {
    color: rgba(0,0,0,0.87);
}
.tool_icon_box-subtitle {
    font-size: 80%; 
    color: #bbb;
}
.tool_icon_box-icon {
    width: 70px; 
    height: 70px; 
    margin: 0 auto 15px;
}
ul.tool_icon_box-status {
    position: absolute;
    list-style: none;
    left: 8px;
    margin: 0;
    padding: 0;
    top: 5px;
}

ul.tool_icon_box-status li {
    display: inline-block;
}

ul.tool_icon_box-status li md-icon {
    font-size: 20px;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
}

.tool_icon_box.is_disabled {
    color: #bbb;
}
.tool_icon_box.is_disabled .tool_icon_box-icon {
    filter: grayscale(100%);
    opacity: 0.5;
}
.tool_icon_box.is_selected {
    box-shadow: 0 0 0 4px #ff623055;
    border-color: var(--primary);
}
/* ------------------------------------ 
* Dot Status
* ------------------------------------ */

.status {
    /* display: -webkit-box; */
    /* display: flex; */
    min-height: 24px;
    align-items: center;
    line-height: 18px;
    padding: 0;
    color: #7c8088;
    font-size: 14px;
    vertical-align: middle;
}

.status:before {
    display: inline-block;
    position: relative;
    top: -1px;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 100%;
    margin-right: 5px;
    background: var(--status-color);
}

.status-lg:before {
    top: 3px;
    width: 16px;
    height: 16px;
    margin-right: 15px;
}

.status-nospace:before { margin-right: 0; }

.status-default:before { background: #ddd; }
.status-success:before { background: rgb(31, 220, 19); }
.status-danger:before { background: rgb(255, 45, 45); }
.status-warning:before { background: tomato; }
.status-info:before { background: rgb(9, 135, 243); }

/* Modify Material Buttons */
#site-content-container md-content > section .md-button {
    border: 1px solid #dcdcdc;
}
#site-content-container md-content > section .md-button.md-raised:not([disabled]) {
    /* background: white; */
    /* color: #ff5722; */
    box-shadow: none;
}
#site-content-container md-content > section .md-button.md-primary {
    border: 1px solid rgb(255,87,34);
}
.dot-update {
    position: relative;
    height: 1em;
}
.dot-update::before{
    position: absolute;
    width: 6px; 
    height: 6px; 
    border-radius: 50%;
    background-color: #ff6230;
    content: '';
    top: 0;
}
.dot-update.s-blink::before {
    /* Animate 10x, ben gak nyumpeki moto nek gak pengen update disek */
    animation: shadow-blink 1s 10;
    /* animation: shadow-blink 1s infinite; */
}
@keyframes shadow-blink {
  to {
    box-shadow: 0 0 0 5px var(--primary-low);
  }
}


.site-navigation .site-navigation-title{
    font-size: 18px;
    letter-spacing: .005em;
    box-sizing: border-box;
    font-weight: 400;
    font-family: Roboto,"Helvetica Neue",sans-serif;
}

md-toolbar.md-default-theme:not(.md-menu-toolbar) .md-button[disabled] md-icon, md-toolbar:not(.md-menu-toolbar) .md-button[disabled] md-icon{
    color: rgba(0,0,0,.3);
}



md-radio-button.md-small ._md-container {
    width: 15px;
    height: 15px;
}
md-radio-button.md-small ._md-on {
    width: 15px;
    height: 15px;
}
md-radio-button.md-small ._md-off {
    width: 15px;
    height: 15px;
}


/* 
 * overblock_link: a dengan link memenuhi seluruh area container
 */
.overblock_link:hover, .overblock_link:focus {
    text-decoration: none;
}
.overblock_link {
    color: inherit;
}
.overblock_link::before {
    content: "";
    position: absolute;
    inset: 0px;
}


.analizer .label{
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
    background-color: #f3f4f6;
    color: rgba(0,0,0,0.87);
}
.analizer .label.active{
    background-color: #ffedd5;
    color: rgba(0,0,0,0.87);
}
.analizer a.label:hover, .analizer .label a:hover, 
.analizer a.label:focus, .analizer .label a:focus{
    text-decoration: none;
}