@tailwind base;
@tailwind components;
@tailwind utilities;

html {
    font-family: 'Red Hat Display', sans-serif;
}

.view:hover ~ .track-vertical {
    opacity: 1;
    transition: 0.3s all;
}

/* AMCharts 5 (Top toolbar) */
/*TODO: Add dark styles*/
[title^="Indicators"]{
    border: 1px solid #ccc!important;
    display: flex!important;
    line-height: 19px!important;
    font-weight: 500;
    padding: 3px!important;
    align-items: center;
}

[title^="Indicators"]:hover{ cursor: pointer}

[title^="Period selector"]{
    border: 1px solid #ccc!important;
    display: flex!important;
    line-height: 19px!important;
    font-weight: 500;
    padding: 3px!important;
    align-items: center;
}

[title^="Period selector"]:hover { background: white!important; }

[title^="Period selector"] .am5stock-link { transition: 0.6s all;}
[title^="Period selector"] .am5stock-link:hover{
    background: rgb(219 234 254);
    cursor: pointer;
    transition: 0.3s all;
}

[title^="Period selector"] .am5stock-link.am5stock-active{
    background: #0795FF;
    color: #fff;
}

/*Chart*/
.rc-dyn-tabs-panellist {
    padding: 6px 12px;
    position: relative;
    height: 100%;
    width: 100%;
}

.rc-dyn-tabs-panel{
    height: 100%;
    width: 100%;
}