src/index.scss
@import "components/styles/partials/variables";

html, body {
	margin: 0;
	padding: 0;
	font-family: $default-font;
	font-weight: 400;
	height: 100vh;
	color: $default-text;
	background: $default-background;
	font-size: 14px;
	overflow: hidden;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	background-color: transparent;
}

html::-webkit-scrollbar {
	width: 7px;
	background-color: transparent;
}

html::-webkit-scrollbar-thumb {
	background-color: $grey;
}

h1, h2, h3, h4, p {
	padding: 0px;
}

button{
	cursor: pointer;
	outline: none;	
}

a{
	text-decoration: none;
}

#root{
	height: 100%;
}

.App{
	height: 100%;
}

img {
    max-width: 100%;
}

.hidden{
	display: none !important;
}

header{
	margin: 20px 20px;
    font-size: 25px;
    font-family: $default-font;
    font-weight: 400;
}

form.form-group {
    * {
        margin: 5px 0px;
    }

    .form-item {
        display: block;
        width: 100%;
        padding: 10px;
        font-size: 16px;
        font-family: $default-font;
        border: 2px solid $lightlightgrey;
        border-radius: 2px;
        outline: none;

        &:hover, &:focus {
            border-color: $umbrella_secondary;
            outline: none;
        }

        background-color: inherit;
    }
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: $lightgrey2;
    }
}


.btn1 {
    background: transparent;
    color: inherit;
    padding: 12px;
    border: solid 1px;
    border-radius: 2px;
    cursor: pointer;

    &:hover {
        color: $umbrella_secondary;
        border-color: $umbrella_secondary;
    }

    &:focus {
        outline: none;
    }
}

.btn2 {
    background: transparent;
    color: inherit;
    cursor: pointer;

    &:hover {
        color: $umbrella_secondary;
    }

    border: none;
    margin: 10px 0px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0;
    font-size: 12px;
    color: $umbrella_secondary;

    &:focus {
        outline: none;
    }
}

.btn3{
    padding: 12px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    outline: none;
    display: block;
    margin: 5px 0px;
    width: 100%;
    max-width: 400px;
    text-align: left;
    font-size: 15px;
    text-transform: capitalize;
    &.a{
        color: white;
        background-color: deepskyblue;
    }
    &.b{
        color: white;
        background-color: #5ef5bd;
    }
    &.c{
        color: white;
        background-color: $pinkred;
    }
}

#postman, .raven {
    position: fixed;
    -webkit-app-region: no-drag;
    bottom: 0px;
    background: $umbrella_secondary;
    color: $white;
    margin: 20px;
    padding: 20px;
    font-size: 16px;
    border-radius: 3px;
    cursor: pointer;
    animation-duration: .75s;
    animation-fill-mode: both;
    animation-name: bounceOut;
    z-index: 500;

    &:hover {
        background: $umbrella_primary;
    }

    &.open {
        // display: block;
        animation-name: bounceIn;
    }

    .body {
    	    display: flex;
		    flex-direction: row;
		    align-items: center;
        * {
            display: inline-block;
        }

        .emoji-text {
            margin-left: 10px;
            position: relative;
            bottom: 0px;
        }

        img {
            width: 30px;
            position: relative;
        }
    }

    svg {
        width: 40px !important;
    }
}

.raven{
    background: $orange;
    color: $white;
    margin: 10px;
    padding: 10px;
    font-size: 14px;
    border-radius: 3px;
    cursor: pointer;
    animation-duration: .75s;
    animation-fill-mode: both;
    animation-name: bounceOut;
    z-index: 100;
    &:hover{
        background: $umbrella_secondary;
    }
    &.open {
        animation-name: bounceIn;
    }
}

@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceOut {
    20% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    50%, 55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

#spinner {
    display: none;
    padding: 22px;
    border-radius: 6px;
    bottom: 0px;
    width: 200px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    z-index: 900;
    
    background-color: rgba(255, 152, 0, 0.81);
    margin: 25px 78px;
    color: $white;

    &.active {
        display: flex !important;
    }

    .text {
        text-align: center;
        font-size: 13px;
    }

    .loader-inner label {
        font-size: 16px;
        display: inline-block;
        opacity: 0;
    }
}

@keyframes lol {
    0% {
        opacity: 0;
        transform: translateX(-300px);
    }

    33% {
        opacity: 1;
        transform: translateX(0px);
    }

    66% {
        opacity: 1;
        transform: translateX(0px);
    }

    100% {
        opacity: 0;
        transform: translateX(300px);
    }
}

@-webkit-keyframes lol {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-300px);
    }

    33% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }

    66% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(300px);
    }
}

.loader-inner label:nth-child(6) {
    -webkit-animation: lol 2.5s infinite ease-in-out;
    animation: lol 2.5s infinite ease-in-out;
}

.loader-inner label:nth-child(5) {
    -webkit-animation: lol 2.5s 100ms infinite ease-in-out;
    animation: lol 2.5s 100ms infinite ease-in-out;
}

.loader-inner label:nth-child(4) {
    -webkit-animation: lol 2.5s 200ms infinite ease-in-out;
    animation: lol 2.5s 200ms infinite ease-in-out;
}

.loader-inner label:nth-child(3) {
    -webkit-animation: lol 2.5s 300ms infinite ease-in-out;
    animation: lol 2.5s 300ms infinite ease-in-out;
}

.loader-inner label:nth-child(2) {
    -webkit-animation: lol 2.5s 400ms infinite ease-in-out;
    animation: lol 2.5s 400ms infinite ease-in-out;
}

.loader-inner label:nth-child(1) {
    -webkit-animation: lol 2.5s 500ms infinite ease-in-out;
    animation: lol 2.5s 500ms infinite ease-in-out;
}