:root{

    --color-1 : #0a0417;
    --color-2 : #ffffff;
    --color-3 : #c3bdd0;
    --color-4 : #7757ff;
    --color-5 : #352d49;
    --color-6 : #241f2e;
    --color-7 : #418ed3;
    --color-8 : #f240b5;
    --color-9 : #1d1728;
    --color-10 : #b2bdc8;
    --color-11 : green;

    --border-color-1:#ffffff20;
    --border-color-2: #221d2f;
    --border-color-3: #afa0ee;


}

.app-action-button-active svg{
    fill: var(--color-2);
}
.app-action-button:not(.app-action-button-active):hover svg{
    fill: var(--color-2);
}

.app-size {
    width: 100%;
    flex:1;
    z-index: 1;
}

.app-content-header .action-bar-button:hover {
    background-color: var(--color-5);
}

.app-nav-bar-fixed-annimated {
    box-shadow: 100px 0px 90px #ffffff15;
}


.post-input-title{
    background-color: var(--color-7);
}
.post-entry-actions{
    background: var(--color-7);
}

.unavailable-time-slot-header {
    background-color: var(--border-color-2);
}
.unavailable-time-slot-header div {
    color: var(--color-2);
}

.unavailable-time-slot, .unavailable-time-slot-end {
    background: var(--border-color-1);
}

.group-buttons{
    background-color: var(--color-5);
}

.button-1{
    border: 2px solid var(--color-4);
    box-shadow: none;
    color : var(--color-2);
}

.button-2 {
    border: 2px solid var(--color-5);
    color : var(--color-2);
    box-shadow: none;
    background-color: var(--color-1);
}
.button-2:hover, .button-3:hover{
    background-color: var(--color-6);
}

option{
    color: white;
    background-color: var(--color-5);
}
.slider-dots .dot.active{
    background-color: var(--color-4);
}


.post-body > .thanks-row {
    background-color: var(--color-6);
    border-radius: 8px;
}

.th-tx-cl {
    color: var(--color-2);
}