@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap');
:root {
	--background-color: #222222 !important;
	--buttons-text-color: #eaeaea !important;
    /* You can find colors at https://materialpalettes.com/ use values I named below for best outcome */
    --accent-main: #d3605b;  /* 500 */
    --accent-darker: #c35857; /* 600 */
    --accent-darkest: #b15050; /* 700 */
    --accent-ligher: #efd2d7; /* 400 */

    /* For blue version comment red and green version */
    /* --accent-main: #5b50b1;  /* 500 */
    /* --accent-darker: #5548a7; /* 600 */
    /* --accent-darkest: #4d3e9b; /* 700 */
    /* --accent-ligher: #cbcae8; /* 400 */

    /* For green version comment red and blue version */
    /* --accent-main: #58b150;  /* 500 */
    /* --accent-darker: #4fa247; /* 600 */
    /* --accent-darkest: #43903c; /* 700 */
    /* --accent-ligher: #cbe7c9; /* 400 */

    --accent-very-light: #efd2d7; /* 100 */
    --custom-logo-text: "JD KURWA";
}
html, body {
    font-family: 'Roboto', sans-serif !important;
}
.fas,
.custom-icons-marks,
.far,
.page-dz-home-btns-title,
span,
.pages-text,
.pages,
#sync,
.form-textarea .form-field-label,
.form-text input,
#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div,
.p-login-form-field > input {
	color: var(--buttons-text-color);
}
.color1,
#head,
.tabs-tab,
html,
.pages,
.section-head,
#sync,
.acc-elm-head,
.panel,
.form-textarea .form-field-label,
.form-text input,
#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div,
.alert,
.p-login-form-field > input {
	background: var(--background-color);
}
.form-textarea>div,
#form-custom-odbiorcy,
#form-custom-odbiorcy .form-select-input-icon {
	background: var(--buttons-text-color);
	color: var(--background-color);
}
#nav,
.tabs-tab > div,
.page-head,
.floating-btn,
.form-submit,
.panel-head,
.form-checkbox.act > .form-checkbox-input,
.form-radio.act > .form-radio-input,
button,
#p-login-form-submit {
    background: var(--accent-main);
}
@keyframes rgb {
    0% { background: red; }
    20% { background: orange }
    40% { background: yellow }
    60% { background: green }
    80% { background: blue }
    100% { background: purple }
}
#p-login-info-icon {
    border: 3px solid var(--accent-main);
}
table tr.act > td:first-child > div.brd {
    border-left: 15px solid var(--accent-main);
}
a.nav-body-elm.act,
#nav-head-btm-btns-my-account.act,
#nav-head-my-account {
    background: var(--accent-darker);
}
.nav-head-my-account-elm.act {
    background: var(--accent-darkest);
}
.color1,
.acc-elm-head-left i,
#p-login-form-passreset,
#p-passreset-form-login {
    color: var(--accent-darker) !important;
}
.alert > span {
    color: #d3605b !important;
}
.alert > hr {
    border-top: 1px solid rgba(255,255, 255,.5);
}
.form-checkbox > .form-checkbox-input > div,
.form-checkbox > .form-checkbox-input {
    border-radius: 50%;
}
#toast-container > .toast-info {
    background-image: none !important;
}
#toast-container > div:after {
    display: none;
}
.form-radio {
    margin-top: 10px;
}
#nav-head {
    border-bottom: 1px solid var(--accent-ligher);
}
#nav-head-user-right-type {
    color: var(--accent-very-light);
}
#nav-body-pc {
    border-top: 1px solid var(--accent-very-light);
}
a#head-logo::after,
#sync-cnt > div::before {
    content: var(--custom-logo-text);
    color: var(--accent-main);
    font-weight: 900;
    letter-spacing: .125rem;
}
#p-login-logo::after {
    content: "Dark Mode \A by hacksncode & Filip Kania";
    color: var(--buttons-text-color);
    opacity: 0.75;
    font-weight: 500;
    border: 2px solid var(--buttons-text-color);
    border-radius: .35rem;
    padding: .25rem .75rem;
    width: 80%;
    margin: .5rem auto 0rem auto;
    letter-spacing: .125rem;
    display: block;
}
#sync-cnt > div::before {
    font-size: 2rem;
}
.form-checkbox > .form-checkbox-input,
.form-checkbox > .form-checkbox-input > div,
.form-radio-input > div {
    background: var(--background-color);
}
.form-checkbox > .form-checkbox-input > i {
    color: var(--background-color);
}
img[alt="Logo"] {
    display: none;
}