/*----------------------------------------------------------*//*Outlineox TextBox*//*----------------------------------------------------------*/
div[element="textbox"][theme="outlinebox"]{
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 12pt;
    position: relative;
}
div[element="textbox"][theme="outlinebox"] input[type="text"]{
    background-color: transparent;
    border: none;
    font-size: inherit;
    font-weight: bold;
    outline: none;
    padding: 10px 15px;
    width: calc(100% - 24px);
}
div[element="textbox"][theme="outlinebox"] label{
	background-color: transparent;
    bottom: 0px;
    color: #ccc;
    cursor: text;
    font-size: inherit;
    font-weight: bold;
    left: 0px;
    padding: 10px 15px;
    position: absolute;
}
div[element="textbox"][theme="outlinebox"]:hover,
div[element="textbox"][theme="outlinebox"]:focus-within{
	border-color: var(--color-primary);
}
div[element="textbox"][theme="outlinebox"] input[type="text"]:hover,
div[element="textbox"][theme="outlinebox"]:hover input[type="text"]{
    border-color: var(--color-primary)
} 
div[element="textbox"][theme="outlinebox"]:hover label{
	color: var(--color-primary);
}
div[element="textbox"][theme="outlinebox"]:focus-within label,
div[element="textbox"][theme="outlinebox"] input[type="text"]:not(:placeholder-shown) ~ label{
	background-color: #fff;
	font-size: 10pt;
	left: 10px;
	padding: 1px;
	top: -12px;
	bottom: auto;
	transition: .2s;
}
div[element="textbox"][theme="outlinebox"]:focus-within label{
    color: var(--color-primary);
}
button[theme="google"]{
    background: var(--color-primary);
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    font-size: 12pt;
    padding: 8px 15px;
}
/*----------------------------------------------------------*//*Outlineox DatePicker*//*----------------------------------------------------------*/
div[element="textbox"][theme="outlinebox"]{
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 12pt;
    position: relative;
}
div[element="textbox"][theme="outlinebox"] input[type="date"]{
    background-color: transparent;
    border: none;
    font-size: inherit;
    font-weight: bold;
    outline: none;
    padding: 10px 15px;
    width: calc(100% - 24px);
}
div[element="textbox"][theme="outlinebox"] label{
    background-color: transparent;
    bottom: 0px;
    color: #ccc;
    cursor: text;
    font-size: inherit;
    font-weight: bold;
    left: 0px;
    padding: 10px 15px;
    position: absolute;
}
div[element="textbox"][theme="outlinebox"]:hover,
div[element="textbox"][theme="outlinebox"]:focus-within{
    border-color: var(--color-primary);
}
div[element="textbox"][theme="outlinebox"] input[type="date"]:hover,
div[element="textbox"][theme="outlinebox"]:hover input[type="date"]{
    border-color: var(--color-primary)
} 
div[element="textbox"][theme="outlinebox"]:hover label{
    color: var(--color-primary);
}
div[element="textbox"][theme="outlinebox"]:focus-within label,
div[element="textbox"][theme="outlinebox"] input[type="date"]:not(:placeholder-shown) ~ label{
    background-color: #fff;
    font-size: 10pt;
    left: 10px;
    padding: 1px;
    top: -12px;
    bottom: auto;
    transition: .2s;
}
div[element="textbox"][theme="outlinebox"]:focus-within label{
    color: var(--color-primary);
}
button[theme="google"]{
    background: var(--color-primary);
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    font-size: 12pt;
    padding: 8px 15px;
}
/*----------------------------------------------------------*//*PlaceHolder TextBox*//*----------------------------------------------------------*/
input[type="text"][theme="placeholder"]{
    outline: none;
    padding: 5px;
}
/*--------------------------------------------------------*//*GOOGLE WAITING INFINITE*//*--------------------------------------------------------*/
div[theme="google"][waiting]{
    height: 75px;
    width: 75px;
}
div[theme="google"][waiting] svg{
    animation: rotate 1800ms linear infinite;
    bottom: 0%;
    height: inherit;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0%;
    width: inherit;
}
div[theme="google"][waiting] svg circle{
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0px;
    stroke-linecap: round;
}
@keyframes rotate{
    100%{
        transform: rotate(360deg);
    }
}
@keyframes dash{
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}
@keyframes color{
    0%{
        stroke: var(--color-primary);
    }
    100% {
        stroke: var(--color-primary);
    }
}