/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 2 Jan. 2023, 9:18:27 pm
    Author     : Days
*/

body {
    font-family:  var(--body-font_family);
    height: 100vh;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background: var(--body-background-color);
    color: var(--body-text-color);
    font-size: var(--body-font_size);
}
html {
    height: -webkit-fill-available;
}
main {
    height: auto;
    min-height: calc(100% - 52px);
    min-height: -o-calc(100% - 52px); /* opera */
    min-height: -webkit-calc(100% - 52px); /* google, safari */
    min-height: -moz-calc(100% - 52px); /* firefox */
    overflow-x: auto;
    overflow-y: auto;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
a {
    text-decoration: none;
}

hr{
    border-color: rgba(0, 0, 0, 0.07);
    border-top: 1px solid rgba(0,0,0,.5);
}
.body-container
{
    display: block;
    z-index: 2;
}
.footer {
    font-size: 12px;
    background: #fff;
    color: #444;
    border-color: #e6e6e6;
    border-top: 1px solid #e6e6e6;
}
.footer label {
    font-size: 12px;
    font-weight: 400;
}
.logo-footer {
    max-width: 100%;
    max-height: 30px;
}
.text-light{
    color:rgb(var(--white-color)) !important;
}
.text-dark{
    color:rgba(var(--black-color),0.9) !important;
}

/*TOP NAV BAR */
.nav_top{
    position: relative;
    height:52px;
    color: var(--nav_top-text_color);
    background-color:  var(--nav_top-background);
    -webkit-box-shadow: 0 2px 2px rgb(0 0 0 / 5%), 0 1px 0 rgb(0 0 0 / 5%);
    box-shadow: 0 2px 2px rgb(0 0 0 / 5%), 0 1px 0 rgb(0 0 0 / 5%);
    z-index: 4;
}
.nav_top-item{
    align-self:stretch;
    display:flex;
    align-items:center;
    border-left: var(--nav_top-company-border_left);
}
.nav_top-basic{
    align-self:stretch;
    display:flex;
    align-items:center;
}
.nav_top a, .nav_top i
{
    color: var(--nav_top-text_color);
    text-decoration: none;
}
.nav_top .user-menu a, .nav_top .user-menu i {
    color: rgba(66,65,61,0.9);
    text-decoration: none;
}
.nav_top-item:hover, .nav_top-basic:hover
{
    color: var(--nav_top-item-color-hover);
    background: var(--nav_top-item-background-hover);
}
.nav_top-item.active {
    background-color: var(--nav_top-company_active-background);
}
.nav_top-item.active a {
    color: rgb(var(--nav_top-company_active-text_color));

}

/*user image*/
.nav-profile-image-container {
    position: absolute;
    left: 8px;
    top: 1px;
    width: 48px;
    height: 48px;
    padding-top: 1px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    color: #FFFFFF !important;
    background: #07a7e3;
    background: -moz-linear-gradient(-45deg, #07a7e3 0%, #32dac3 100%);
    background: -webkit-linear-gradient(-45deg, #07a7e3 0%, #32dac3 100%);
    background: linear-gradient(135deg, #07a7e3 0%, #32dac3 100%);
    -webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
}
.nav-profile-image-container-white {
    background-color: #fff;
    width: 46px;
    height: 46px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    margin: 0 auto;
    box-sizing: border-box;
}
.nav-profile-image-container img {
    width: 46px;
    height: 46px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    margin: 0 auto;
    box-sizing: border-box;
}
.nav_top-button{
    align-self:stretch;
    display:flex;
    align-items: baseline;
}
.dropdown-toggle {
    outline: 0;
}
.btn-toggle {
    padding: .25rem .5rem;
    font-weight: 600;
    color: rgba(0, 0, 0, .65);
    background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
    color: rgba(0, 0, 0, .85);
    background-color: #d2f4ea;
}
.btn-toggle::before {
    width: 1.25em;
    line-height: 0;
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
    transition: transform .35s ease;
    transform-origin: .5em 50%;
}
.btn-toggle[aria-expanded="true"] {
    color: rgba(0, 0, 0, .85);
}
.btn-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
}
.btn-toggle-nav a {
    padding: .1875rem .5rem;
    margin-top: .125rem;
    margin-left: 1.25rem;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
    background-color: #d2f4ea;
}
.scrollarea {
    overflow-y: auto;
}

/* LEFT NAV BAR */
.col-nav-side
{
    background-color: var(--nav_side-background);
    z-index: 3;
}
.nav-side
{
    background-color: var(--nav_side-background);
    font-size: 13px;
    height: auto;
    z-index: 3;
}
.nav-side .nav-icon{
    display: inline-block !important;
    margin-right: 3px !important;
    background: #eee;
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    text-align: center !important;
    color: white !important;
}
.nav-side .side-item
{
    position: relative;
    border-bottom: var(--nav_side-item-border_bottom) !important;
    border-left: var(--nav_side-item-border_left);
}
.nav-side .side-item:hover {
    border-left: 3px solid var(--active-color);
    color: rgba(27,27,27,1);
    background: var(--nav_side-item_active-background);
}
.nav-side .side-item a {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    color:  var(--nav_side-item_a-text);
}
.nav-side .side-item.active  {
    color: rgba(27,27,27,1);
    background: var(--nav_side-item_active-background);
    border-left: 3px solid var(--active-color);
}
.multi-icon
{
    font-size: 8px;
    color: rgb(var(--gray-dark-color));
}
.nav-side .sub{
    background: var(--nav_side-item_sub-background);
}
.nav-side .nav-icon .sub {
    font-size: 12px;
    margin-right: 3px !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
}
.nav-side .sub.active{
    color: rgba(27,27,27,1);
    background: var(--nav_side-item_sub_active-background);
}


/* little chevron multi
.nav-side .multi .nav-animate > a:after {
    -webkit-transition: all .3s;
    transition: all .3s;
}

.nav-side .multi .nav-open>a:after {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

.nav-side .multi >a:after {
    position: absolute;
    top: 50%;
    right: 22px;
    display: block;
    width: 5px;
    height: 5px;
    margin-top: -2px;
    content: '';
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-width: 1px 1px 0 0;
    border-style: solid;
}
*/

.flexbox {
    display: flex !important;
    -webkit-transition: all .3s linear 0s;
    transition: all .3s linear 0s;
}
.hidden {
    display: none !important;
    -webkit-transition: all .3s linear 0s;
    transition: all .3s linear 0s;
}

/* Form */
::placeholder
{
    color: rgba(191,191,191,.87) !important;
}
.form-control:focus {
    box-shadow: var(--input-form_control-box_shadow-focus);
}
.form-label {
    font-size: 13px;
    margin-bottom: 2px;
}
select:focus, input:focus, button:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border-color: rgba(81, 203, 238, 1) !important;
}

/*Label*/
.px-navbar-label {
    position: relative;
    top: 10px;
    display: inline-block;
    float: none;
    margin: 0 0 0 -8px;
    padding: 0 2px;
    vertical-align: top;
    font-size: 8px;
    font-weight: 700;
    line-height: 10px;
}
form label{
    font-weight: 500 !important;
}
.label{
    white-space: nowrap;
    text-align: center;
    border-radius: 0.25em;
}
.label-success {
    border-color: rgba(var(--green-dark-color),1);
    background: rgba(var(--green-color),0.8);
    color: #fff;
}
.label-warning {
    border-color: rgba(var(--yellow-dark-color),1);
    background: rgba(var(--yellow-color),0.8);
    color: #fff;
}
.label-error {
    border-color: rgba(var(--red-dark-color),1);
    background: rgba(var(--red-color),0.8);
    color: #fff;
}

/*Input*/
input:read-only:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=submit])
{
    cursor: not-allowed;
    opacity: .85 !important;
    background: #f5f5f5 !important;
}
.input-error{
    border-color: #e0b4b4;
    color: #9f3a38;
    background: #fff6f6;
}
input{
    padding-right: 0px !important;
}
form input, form select
{
    color: rgb(var(--black-color),0.9) !important;
}
.ui.selection.uidropdown .menu>.item {
    font-size:12px !important;
    padding: 8px 12px !important;
    border-bottom: 1px #eee solid;
}
.ui.icon.input button{
    margin-left:-21px;
    background-color:transparent;
    font-size: 8px;
    border:none;
}

.form-xs .ui.selection.uidropdown,.form-xs .ui.selection.dropdown
{
    font-size:10px;
}
.form-xs input,.form-xs select, .form-xs textarea, .input-xs {
    font-size:10px;
    padding: 4px 0px 4px 3px !important;
}
.form-sm .ui.selection.uidropdown,.form-sm .ui.selection.dropdown{
    font-size:12px;
}

.form-sm input,.form-sm select, .form-sm textarea, .input-sm {
    font-size:12px;
    padding: 5px 0px 5px 3px !important;
}
.form-md .ui.selection.uidropdown,.form-md .ui.selection.dropdown{
    font-size:14px !important;
}
.ui.selection.uidropdown.search>input.search, .ui.multiple.search.uidropdown>input.search
{
    width: 100% !important;
    margin: 0px !important;
    padding-left:14px !important;
    padding-top:10px !important;
}
.form-md input, .form-md select, .form-md textarea, .input-md{
    font-size:14px !important;
    padding: 7px 0px 7px 4px !important;
}
.form-lg .ui.selection.uidropdown,.form-lg .ui.selection.dropdown{
    font-size:16px !important;
}
.form-lg input, .form-lg select, .form-lg textarea .input-lg{
    font-size:16px !important;
    padding: 8px 0px 8px 6px !important;
}
.form-xl .ui.selection.uidropdown,.form-xl .ui.selection.dropdown{
    font-size:20px !important;
}
.form-xl input, .form-xl select, .form-xl textarea, .input-xl{
    font-size:20px !important;
    padding: 10px 0px 10px 8px !important;
}

/* Buttons */
.xs
{
    --button-font_size:7px;
    --button-padding: 4px 6px;
}
.tiny
{
    --button-font_size:8px;
    --button-padding: 6px 8px;
}
.small
{
    --button-font_size:10px;
    --button-padding: 6px 8px;
}
.big
{
    --button-font_size:16px;
    --button-padding: 10px 14px;
}
.button{
    cursor: pointer;
    display: inline-block;
    font-size:var(--button-font_size);
    padding: var(--button-padding);
    min-height: 1em;
    outline: 0;
    border: none;
    vertical-align: baseline;
    color: var(--button-text-color);
    background-color: var(--button-background-color);
    margin: 0;
    text-transform: none;
    text-shadow: none;
    font-weight: 500;
    line-height: 1em;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border-radius: 0.28571429rem;
    -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgb(34 36 38 / 15%) inset;
    box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgb(34 36 38 / 15%) inset;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    will-change: '';
    -webkit-tap-highlight-color: transparent;
}

/*## TABLES ##*/
tbody, td, tfoot, th, thead, tr {
    border-color: rgba(var(--gray-color),0.6) !important;
}
.table th
{
    font-size: var(--table-th-font_size) ;
}
.table td
{
    font-size: var(--table-td-font_size);
}

/*Position Table*/
.table-valign-middle td, .table-valign-top th{
    vertical-align: middle!important;
}
.table-valign-top td, .table-valign-top th{
    vertical-align: top!important;
}

/*Table Condensed*/
.table-condensed-0 td, .table-condensed-0 th  {
    padding:0px !important;
}
.table-condensed-1 td, .table-condensed-1 th  {
    padding:1px !important;
}
.table-condensed-2 td, .table-condensed-2 th {
    padding:2px !important;
}
.table-condensed-3 td, .table-condensed-3 th {
    padding:3px !important;
}
.table-condensed-4 td, .table-condensed-4 th {
    padding:4px !important;
}
.table-condensed-5 td, .table-condensed-5 th {
    padding:5px  !important;
}
.table-condensed-6 td, .table-condensed-6 th {
    padding:6px !important;
}
.table-condensed-7 td, .table-condensed-7 th {
    padding:7px !important;
}
.table-condensed-8 td, .table-condensed-8 th {
    padding:8px !important;
}
.table-condensed-9 td, .table-condensed-9 th {
    padding:9px !important;
}

/*Table Verical*/
table.vertical thead {
    float: left;
}
table.vertical thead th {
    display: block;
}
table.vertical tbody {
    float: right;
}
table.vertical tbody tr {
    display: inline-block;
}
table.vertical tbody td {
    display: block;
}

/*Data Tables*/
.data-table{
    display:none;
    width:100% !important;
}
.data-table input, .dataTables_filter input{
    border-color: rgb(var(--gray-color)) !important;
    border-style: solid;
    border-width: 1px;
    font-size:16px !important;
    outline: none !important;
}
.dt-buttons, .dataTables_filter, .dataTables_length, .dataTables_info
{
    font-size:12px !important;
    margin:3px;
}
div.dt-button-collection button.dt-button:active:not(.disabled), div.dt-button-collection button.dt-button.active:not(.disabled), div.dt-button-collection div.dt-button:active:not(.disabled), div.dt-button-collection div.dt-button.active:not(.disabled), div.dt-button-collection a.dt-button:active:not(.disabled), div.dt-button-collection a.dt-button.active:not(.disabled){
    background-color: #a7a7a7;
    /* background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #dadada 100%); */
    background-image: -moz-linear-gradient(top, #f0f0f0 0%, #a7a7a7 100%);
    background-image: -ms-linear-gradient(top, #f0f0f0 0%, #a7a7a7 100%);
    background-image: -o-linear-gradient(top, #f0f0f0 0%, #a7a7a7 100%);
    background-image: linear-gradient(to bottom, #f0f0f0 0%, #a7a7a7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f0f0f0', EndColorStr='#a7a7a7');
}
table.dataTable thead th, table.dataTable thead td, table.dataTable.no-footer{
    border-bottom: 1px solid lightgray;
}
.remove-sorting, .dt-no-sort{
    background:none !important;
}
.dataTable thead th:before, .dataTable thead th:after{
    display:none !important;
}
.dataTables_paginate{
    float:right !important;
}
.dataTables_info{
    float:left !important;
}
.dataTables_filter{
    float:right !important;
    margin-bottom:7px !important;
}
a.paginate_button
{
    font-size:12px;
    padding:2px 8px !important;
}
a.paginate_button.last
{
    display:none!important;
}
a.paginate_button.next{
    display:none!important;
}
a.paginate_button.previous{
    display:none !important;
}
a.paginate_button.first{
    display:none !important;
}

/*Panel*/
.panel-body{
    display: block;
    overflow: auto;
    min-width: fit-content !important;
    padding: 10px 20px 10px 20px;
    background-color: #fcfcfc;
}
.panel-body-shadow{
    display: block;
    overflow: auto;
    padding: 20px;
    min-width: fit-content !important;
    margin-bottom:30px;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 13px 18px -15px rgba(0,0,0,0.23);
    -moz-box-shadow: 0px 13px 18px -15px rgba(0,0,0,0.23);
    box-shadow: 0px 13px 18px -15px rgba(0,0,0,0.23);
}

/*Modal*/
.modal-dialog, .modal-content, .panel-body, .panel-body-shadow{
    height: fit-content !important;
}
.modal-header .btn-close {
    font-size:12px !important;
}
.modal-body, .modal .modal-header, .modal-content, .panel-body-shadow, .panel-body
{
    overflow: initial !important;
}

/*Head Titles */
.h1, h1 {
    color: rgba(var(--black-color),1) !important;
    font-size: 32px;
    font-weight: 600;
}
.h2, h2 {
    color: rgba(var(--black-color),1) !important;
    font-size: 26px;
    font-weight: 600;
}
.h3, h3 {
    color: rgba(var(--black-color),1) !important;
    font-size: 22px;
    font-weight: 600;
}
.h4, h4 {
    color: rgba(var(--black-color),1) !important;
    font-size: 18px;
    font-weight: 600;
}
.h5, h5 {
    color: rgba(var(--black-color),1) !important;
    font-size: 14px;
    font-weight: 600;
}
.h6, h6 {
    color: rgba(var(--black-color),1) !important;
    font-size: 12px;
    font-weight: 600;
}

/*Width Start */
.width-100p{
    width:100%;
}
.width-10p{
    width:10%;
}
.width-20p{
    width:20%;
}
.width-25p{
    width:25%;
}
.width-30p{
    width:30%;
}
.width-40p{
    width:40%;
}
.width-50p{
    width:50%;
}
.width-60p{
    width:60%;
}
.width-70p{
    width:70%;
}
.width-75p{
    width:75%;
}
.width-80p{
    width:80%;
}
.width-90p{
    width:90%;
}

.width-5{
    width:5px;
}
.width-10{
    width:10px;
}
.width-15{
    width:15px;
}
.width-20{
    width:20px;
}
.width-25{
    width:25px;
}
.width-30{
    width:30px;
}
.width-35{
    width:35px;
}
.width-40{
    width:40px;
}
.width-45{
    width:45px;
}
.width-50{
    width:50px;
}
.width-55{
    width:55px;
}
.width-60{
    width:60px;
}
.width-65{
    width:65px;
}
.width-70{
    width:70px;
}
.width-75{
    width:75px;
}
.width-80{
    width:80px;
}
.width-85{
    width:85px;
}
.width-90{
    width:90px;
}
.width-95{
    width:95px;
}
.width-100{
    width:100px;
}
.width-125{
    width:125px;
}
.width-150{
    width:150px;
}
.width-175{
    width:175px;
}
.width-200{
    width:200px;
}
.width-225{
    width:225px;
}
.width-250{
    width:250px;
}
.width-275{
    width:275px;
}
.width-300{
    width:300px;
}
.width-350{
    width:350px;
}
.width-400{
    width:400px;
}
.width-450{
    width:450px;
}
.width-500{
    width:500px;
}
.width-550{
    width:550px;
}
.width-600{
    width:600px;
}
.width-650{
    width:650px;
}
.width-700{
    width:700px;
}
.width-750{
    width:750px;
}
.width-800{
    width:800px;
}
.width-850{
    width:850px;
}
.width-900{
    width:900px;
}

/*Font Size*/
.font-size-7, .font-size-7 td{
    font-size:7px!important
}
.font-size-8, .font-size-8 td{
    font-size:8px!important
}
.font-size-9, .font-size-9 td{
    font-size:9px!important
}
.font-size-10, .font-size-10 td{
    font-size:10px!important
}
.font-size-11, .font-size-11 td{
    font-size:11px!important
}
.font-size-12, .font-size-12 td{
    font-size:12px!important
}
.font-size-13, .font-size-13 td{
    font-size:13px!important
}
.font-size-14, .font-size-14 td{
    font-size:14px!important
}
.font-size-15, .font-size-15 td{
    font-size:15px!important
}
.font-size-16, .font-size-16 td{
    font-size:16px!important
}
.font-size-17, .font-size-17 td{
    font-size:17px!important
}
.font-size-18, .font-size-18 td{
    font-size:18px!important
}
.font-size-19, .font-size-19 td{
    font-size:19px!important
}
.font-size-20, .font-size-20 td{
    font-size:20px!important
}
.font-size-21, .font-size-21 td{
    font-size:21px!important
}
.font-size-22, .font-size-22 td{
    font-size:22px!important
}
.font-size-23, .font-size-23 td{
    font-size:23px!important
}
.font-size-24, .font-size-24 td{
    font-size:24px!important
}
.font-size-25, .font-size-25 td{
    font-size:25px!important
}
.font-size-26, .font-size-26 td{
    font-size:26px!important
}
.font-size-27, .font-size-27 td{
    font-size:27px!important
}
.font-size-28, .font-size-28 td{
    font-size:28px!important
}
.font-size-29, .font-size-29 td{
    font-size:29px!important
}
.font-size-30, .font-size-30 td{
    font-size:30px!important
}
.font-size-31, .font-size-31 td{
    font-size:31px!important
}
.font-size-32, .font-size-32 td{
    font-size:32px!important
}
.font-size-33, .font-size-33 td{
    font-size:33px!important
}
.font-size-34, .font-size-34 td{
    font-size:34px!important
}
.font-size-35, .font-size-35 td{
    font-size:35px!important
}

/*Print*/
@media print
{   
    body, .panel-body, .panel-body-shadow, .body-container
    {
        background-color: white;
        margin: 0px !important;
        padding: 0px !important;
    } 
    
    .no-print, .no-print *
    {
        display: none !important;
    }
    
    .printable
    {
        visibility: visible;
    }    
}

/*Loading*/
.loading{
    position:relative;
    cursor:default;
    text-shadow:none!important;
    color:transparent!important;
    opacity:1;
    pointer-events:auto;
    -webkit-transition:all 0s linear,opacity .1s ease;
    transition:all 0s linear,opacity .1s ease
}
.loading:before{
    position:absolute;
    content:'';
    top:50%;
    left:50%;
    margin:-.64285714em 0 0 -.64285714em;
    width:1.28571429em;
    height:1.28571429em;
    border-radius:500rem;
    border:.2em solid rgba(0,0,0,.15)
}
.loading:after{
    position:absolute;
    content:'';
    top:50%;
    left:50%;
    margin:-.64285714em 0 0 -.64285714em;
    width:1.28571429em;
    height:1.28571429em;
    -webkit-animation:button-spin .6s linear;
    animation:button-spin .6s linear;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    border-radius:500rem;
    border-color:#fff transparent transparent;
    border-style:solid;
    border-width:.2em;
    -webkit-box-shadow:0 0 0 1px transparent;
    box-shadow:0 0 0 1px transparent
}
@-webkit-keyframes button-spin{
    from{
        -webkit-transform:rotate(0);
        transform:rotate(0)
    }
    to{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg)
    }
}
@keyframes button-spin{
    from{
        -webkit-transform:rotate(0);
        transform:rotate(0)
    }
    to{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg)
    }
}