/* FONTS */

@import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,700,800,900&display=swap&subset=latin-ext');

/* CLEARFIX */

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

@font-face {
    font-family: 'amcap_eternalregular';
    src: url('../fonts/amcap_eternal-webfont.woff2') format('woff2'),
         url('../fonts/amcap_eternal-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
body {
    background: #141414;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000000;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #222222;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ff0000;
}
button {
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
/* ------------------------ BODY ------------------------ */ 
.pad5 {
    padding: 5% !important;
}
.nomg-b {
    margin-bottom: 0 !important;
}
.nomg-r {
    margin-right: 0 !important;
}
.nomg-t {
    margin-top: 0 !important;
}
p, a, span, li, i {
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
/* LOGIN PAGE */
.acm-login {
    width: 100%;
    background-image: url(../images/login-bg.png) ,url(../images/header_pattern.jpg);
    background-repeat: no-repeat, repeat;
    background-position: center;
    background-attachment: fixed, scroll;
    background-size: cover;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: 50px;
}
.acm-login-title {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 2em;
    font-family: 'amcap_eternalregular';
    color: #fff;
}
.acm-login .acm-login-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    margin-top: 50px;
}
.acm-login .acm-login-box {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.acm-lb-input {
    overflow: hidden;
    position: relative;
}
.acm-lb-input-email::before {
    position: absolute;
    content: "\f0e0";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #fff;
    z-index: 1;
    width: 50px;
    text-align: center;
    line-height: 50px;
}
.acm-lb-input-phone::before {
    position: absolute;
    content: "\f879";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #fff;
    z-index: 1;
    width: 50px;
    text-align: center;
    line-height: 50px;
}
.acm-lb-input:hover::before {
    color: #ff0000;
}
.acm-lb-input-pass::before {
    position: absolute;
    content: "\f13e";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #fff;
    z-index: 1;
    width: 50px;
    text-align: center;
    line-height: 50px;
}
input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"] {
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    outline: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px 15px 15px 50px;
    box-sizing: border-box;
    margin-bottom: 10px;
    color: #fff;
    position: relative;
    font-family: 'Exo 2', sans-serif;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
input[type="email"]:hover,
input[type="password"]:hover,
input[type="text"]:hover,
input[type="tel"]:hover {
    border: 1px solid rgba(255, 0, 0, 0.5);
    box-shadow: 0px 0px 10px rgba(255, 206, 12, 0.4);
}
input[type="email"]:active,
input[type="password"]:active,
input[type="text"]:active,
input[type="tel"]:active {
    border: 1px solid #ff0000;
}
input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus {
    border: 1px solid #ff0000;
    box-shadow: 0px 0px 10px rgba(255, 206, 12, 0.4);
}
input[type="submit"] {
    display: block;
    width: 100%;
    padding: 20px;
    color: #fff;
    background: #ff0000;
    border: 1px solid #ff0000;
    font-family: 'amcap_eternalregular';
}
::-webkit-input-placeholder {
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
    font-size: 1em;
    color: #ffffff;
    font-style: italic;
}

input:placeholder { /* Firefox 18- */
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
    font-size: 1em;
    color: #ffffff;
    font-style: italic;
}
:-ms-input-placeholder {  
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
    font-size: 1em;
    color: #ffffff;
    font-style: italic;
}
.acm-login .acm-login-box .acm-lb-help {
    margin-top: 20px;
    color: #fff;
    overflow: hidden;
}
.acm-login .acm-login-box .acm-lb-help a {
    text-decoration: none;
    color: #ff0000;
    font-weight: 700;
}
.acm-login .acm-login-box .acm-lb-help a:hover {
    text-decoration: underline;
}
.acm-login .acm-login-box .acm-lb-help .acm-lb-register {
    float: left;
}
.acm-login .acm-login-box .acm-lb-help .acm-lb-reset {
    float: right;
}
input:placeholder-shown {
    color: #fff;
}
/* ACM NAV */
.acm-responsive-nav {
    background: #000;
    position: fixed;
    top: 0;
    left: 350px;
    z-index: 1000;
    padding: 15px;
    text-decoration: none;
    color: #fff;
    text-align: center;
    display: none;
}
.acm-responsive-nav img {
    margin-bottom: 5px;
}
.slide-nav {
    left: 0 !important;
}
.slide-btn {
    left: 250px !important;
    background: #ff0000;
    color: #000;
}
.slide-btn:hover {
    color: #000;
}
.acm-nav {
    position: fixed;
    background: #000;
    height: 100vh;
    width: 350px;
    float: left;
    top: 0;
    box-sizing: border-box;
    z-index: 100;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.acm-nav .acm-logo img {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.acm-nav .acm-nav-acc {
    padding: 10px;
    box-sizing: border-box;
}
.acm-nav .acm-nav-acc .acm-nav-acc-name {
    font-size: 1.125em;
    color: #fff;
    text-align: center;
}
.acm-nav .acm-nav-acc .acm-nav-acc-name span {
    font-weight: 700;
    color: #ff0000;
}
.acm-nav .acm-nav-acc .acm-nav-logout-btn {
    text-decoration: none;
    text-align: center;
    display: block;
    margin: 20px auto;
    width: 200px;
    padding: 10px;
    box-sizing: border-box;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.875em;
}
.acm-nav .acm-nav-acc .acm-nav-logout-btn:hover {
    color: #ff0000;
}
.acm-nav .acm-nav-acc .acm-nav-logout-btn:hover i {
    margin-right: 15px;
}
.acm-nav .acm-nav-acc .acm-nav-logout-btn i {
    margin-right: 10px;
}
.acm-nav .acm-nav-menu {
    overflow: hidden;
    padding: 0 40px;
}
.acm-nav .acm-nav-menu ul {
    width: 100%;
}
.acm-nav .acm-nav-menu ul li {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.acm-nav .acm-nav-menu ul li a {
    text-decoration: none;
    padding: 15px 0;
    display: block;
    color: #fff;
    font-size: 1em;
    font-weight: 300;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    position: relative;
}
.acm-nav .acm-nav-menu ul li a:hover {
    color: #ff0000;
    font-weight: 600;
}
.acm-nav .acm-nav-menu ul li a:hover .acm-nm-icon {
    left: 10px;
}
.acm-nav .acm-nav-menu ul li a .acm-nm-icon {
    left: -70px;
    text-align: center;
    position: absolute;
}
.acm-nav-menu .acm-active-menu a {
    color: #ff0000 !important;
    font-weight: 700 !important;
}
.acm-nav-menu .acm-active-menu a .acm-nm-icon {
    left: 10px !important;
}
.acm-content {
    width: 100%;
    padding-left: 350px;
    box-sizing: border-box;
    background-color: #000;
    background-image:  url(../images/login-bg.png), url(../images/header_pattern.jpg);
    background-repeat: no-repeat, repeat;
    background-position: center, center;
    background-attachment: fixed;
    background-size: cover, auto;
}
.acm-content .acm-head {
    box-sizing: border-box;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: 350px;
    background-image: url(../images/header_pattern.jpg);
    background-repeat: repeat;
    background-position: right, center;
}
.acm-content .acm-head .acm-head-client .acm-hc-name {
    color: #fff;
    font-size: 1;
    float: left;
    line-height: 35px;
    margin-right: 20px;
}
.acm-content .acm-head .acm-head-client .acm-hc-logout {
    display: inline-block;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    background: #000;
    font-size: 0.875em;
    text-decoration: none;
    color: #fff;
    float: left;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.acm-content .acm-head .acm-head-client .acm-hc-logout span {
    margin-left: 10px;
}
.acm-content .acm-head .acm-head-client .acm-hc-logout i {
    color: #ff0000;
}
.acm-content .acm-head .acm-head-client {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 30px 30px 70px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.1);
}
.acm-content .acm-head .acm-head-client .acm-hc-name span {
    font-weight: 700;
    color: #ff0000;
}
.acm-content .acm-container {
    position: relative;
    padding: 70px;
    box-sizing: border-box;
}
.acm-content .acm-c-client {
    padding: 150px 70px 70px 70px;
}
.acm-content .acm-container .acm-content-box {
    float: left;
    width: calc(100% - 550px);
    margin-right: 50px;
}
.acm-content .acm-container .acm-content-sidebar {
    float: right;
    width: 500px;
    box-sizing: border-box;
    position: sticky;
    top: 120px;
}
.acm-content .acm-container .sidebar-client {
    top: 20px;
}
.acm-content .acm-container .acm-content-sidebar .acm-active-appointment {
    background-color: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    box-shadow: 0px 0px 15px rgba(255, 12, 12, 0.67);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.acm-content .acm-container .acm-content-sidebar .acm-active-appointment:hover {
    box-shadow: 0px 0px 25px #ff0000;
}
.acm-content .acm-container .acm-content-sidebar .acm-active-appointment .acm-aap-title {
    text-align: left;
    padding: 30px;
    box-sizing: border-box;
    background-color: #000;
    background-image: url(../images/aap-bg.png);
    background-position: right center;
    background-size: 100%;
    background-repeat: no-repeat;
    border-bottom: 8px solid rgba(255, 255, 255, 0.1);
}
.acm-content .acm-container .acm-content-sidebar .acm-active-appointment .acm-aap-title p {
    font-size: 2em;
    font-family: 'amcap_eternalregular';
    color: #ffffff;
}
.acm-content .acm-container .acm-content-sidebar .acm-active-appointment .acm-aap-title p span {
    display: block;
    color: #ff0000;
}
.acm-content .acm-container .acm-content-sidebar .acm-active-appointment .acm-aap-content {
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    font-weight: 300;
}
.acm-content .acm-container .acm-content-sidebar .acm-active-appointment .acm-aap-content .acm-aap-date {
    text-align: center;
    font-size: 1.250em;
    color: #fff;
    font-weight: 300;
    margin-bottom: 20px;
}
.acm-content .acm-container .acm-content-sidebar .acm-active-appointment .acm-aap-content .acm-aap-date span {
    color: #ff0000;
    font-weight: 600;
}
.acm-content .acm-container .acm-content-sidebar .acm-active-appointment .acm-aap-content .acm-aap-item {
    line-height: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 0;
    box-sizing: border-box;
}
.acm-content .acm-container .acm-content-sidebar .acm-active-appointment .acm-aap-content .acm-aap-item span {
    font-weight: 700;
}
.acm-content .acm-container .acm-content-sidebar .acm-active-appointment .acm-aap-content .item-mentions {
    border-bottom: 0;
}
.acm-content .acm-container .acm-content-sidebar .acm-active-appointment .acm-aap-content .item-mentions span {
    display: block;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 10px;
    line-height: 20px;
}
.acm-content .acm-container .acm-content-sidebar .acm-active-appointment .acm-aap-content .acm-aap-price {
    background: #000;
    padding: 20px;
    box-sizing: border-box;
    font-weight: 700;
}
.acm-content .acm-container .acm-content-sidebar .acm-active-appointment .acm-aap-content .acm-aap-price span {
    color: #ff0000;
}
.acm-content .acm-container .acm-content-box .acm-cb-section {
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.4);
    margin-bottom: 30px;
}
.acm-content .acm-container .acm-content-box .acm-cb-title {
    padding: 30px;
    box-sizing: border-box;
    background: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.acm-content .acm-container .acm-content-box .acm-cb-title p {
    font-weight: 700;
    color: #fff;
    float: left;
}
.acm-content .acm-container .acm-content-box .acm-cb-title a {
    float: right;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.875em;
    color: rgba(255, 255, 255, 0.31);
}
.acm-content .acm-container .acm-content-box .acm-cb-title a:hover {
    text-decoration: underline;
    color: #ff0000;
}
.acm-content .acm-container .acm-content-box .acm-cb-section .acm-cb-content {
    padding: 30px;
    box-sizing: border-box;
}
.acm-content .acm-container .acm-content-box .acm-cb-item-not-found {
    text-align: center;
}
.acm-content .acm-cb-app-item {
    padding: 15px 15px 15px 70px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    margin-bottom: 10px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    color: #fff;
    overflow: hidden;
}
.acm-content .acm-cb-app-item:hover .app-bi-btn {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.acm-content .acm-cb-app-item:hover {
    box-shadow: 0px 0px 15px rgba(255, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.05);
}
.acm-content .app-status-new {
    border: 1px solid rgba(255, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}
.acm-content .app-status-new::before {
    position: absolute;
    content: "\f783";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    font-size: 1.3em;
    color: #000000;
    left: 0;
    top: 0;
    width: 50px;
    background: #ff0000;
    height: 100%;
    text-align: center;
    line-height: 45px;
    z-index: 1;
}
.acm-content .app-status-new::after {
    position: absolute;
    content: "NOUA";
    font-size: 1em;
    color: rgba(0, 0, 0, 0.33);
    bottom: 20px;
    left: 17px;
    width: 50px;
    height: 50px;
    z-index: 1;
    visibility: visible;
    font-weight: 700;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.acm-content .app-status-finished:hover {
    box-shadow: 0px 0px 0px transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.acm-content .app-status-finished::before {
    position: absolute;
    content: "\f274";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    font-size: 1.3em;
    color: #313131;
    left: 0;
    top: 0;
    width: 50px;
    background: #000000;
    height: 100%;
    text-align: center;
    line-height: 45px;
}
.acm-content .app-status-finished::after {
    position: absolute;
    content: "FINALIZATA";
    font-size: 1em;
    color: rgba(255, 255, 255, 0.2);
    bottom: 20px;
    left: 17px;
    width: 50px;
    height: 50px;
    z-index: 1;
    visibility: visible;
    font-weight: 700;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.acm-content .app-status-canceled {
    border: 1px solid rgba(255, 0, 0, 0.28);
    background: rgba(255, 0, 0, 0.09);
}
.acm-content .app-status-canceled:hover {
    box-shadow: 0px 0px 15px rgba(255, 0, 0, 0.5);
}
.acm-content .app-status-canceled::before {
    position: absolute;
    content: "\f273";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    font-size: 1.3em;
    color: #ff0c0c;
    left: 0;
    top: 0;
    width: 50px;
    background: #000000;
    height: 100%;
    text-align: center;
    line-height: 45px;
}
.acm-content .app-status-canceled::after {
    position: absolute;
    content: "ANULATA";
    font-size: 1em;
    color: rgb(255, 0, 0);
    bottom: 20px;
    left: 17px;
    width: 50px;
    height: 50px;
    z-index: 1;
    visibility: visible;
    font-weight: 700;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.acm-content .acm-cb-app-item .app-box-info {
    margin-right: 30px;
    display: block;
    line-height: 30px;
}
.acm-content .acm-cb-app-item .app-box-info p {
    font-weight: 300;
}
.acm-content .acm-cb-app-item .app-box-info p i {
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.5);
}
.acm-content .acm-cb-app-item .app-bi-btn {
    text-decoration: none;
    box-sizing: border-box;
    font-size: 0.875em;
    color: rgba(255, 255, 255, 0.19);
    font-weight: 600;
    display: inline-block;
    margin-top: 20px;
    padding: 15px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.acm-content .acm-cb-app-item .bi-btn-delete {
    padding: 14px;
    background: transparent;
}
.acm-content .acm-cb-app-item .bi-btn-cancel {
    padding: 14px;
    background: transparent;
}
.acm-content .acm-cb-app-item .bi-btn-edit {
    padding: 14px;
    background: transparent;
}
.acm-content .acm-cb-app-item .app-bi-btn i {
    margin-right: 10px;
}
.acm-content .acm-cb-app-item .bi-btn-delete i {
    margin-right: 0;
}
.acm-content .acm-cb-app-item .bi-btn-edit i {
    margin-right: 0;
}
.acm-content .acm-cb-app-item .bi-btn-cancel i {
    margin-right: 0;
}
.acm-content .acm-cb-app-item .app-bi-btn:hover {
    color: #ff0000;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.acm-content .acm-cb-app-item .bi-btn-delete:hover {
    color: #ff0000;
    border: 1px solid #ff0000;
}
.acm-content .acm-cb-app-item .bi-btn-cancel:hover {
    color: #ff0000;
    border: 1px solid #ff0000;
}
.acm-content .acm-cb-app-item .bi-btn-edit:hover {
    color: #ff0000;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.acm-content .acm-cb-app-item .app-box-details {
    padding: 15px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
    margin-top: 20px;
    display: none;
}
.acm-content .acm-cb-app-item .app-box-details span {
    font-weight: 700;
    color: #ff0000;
}
.acm-content .acm-cb-app-item .app-box-details .app-box-info-mentions {
    margin-top: 10px;
    color: white;
    font-weight: 300;
    display: block;
    line-height: 20px;
    font-size: 0.875em;
}
.acm-content .acm-cb-app-item .app-box-details .app-box-info-close {
    text-decoration: none;
    box-sizing: border-box;
    font-size: 0.875em;
    color: rgba(255, 255, 255, 0.19);
    font-weight: 600;
    display: inline-block;
    margin-top: 20px;
    padding: 10px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.acm-content .acm-cb-app-item .app-box-details .app-box-info-close:hover {
    color: #ff0000;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.acm-content .acm-cb-app-item .app-box-details .app-box-info-close i {
    margin-right: 10px;
}
/*------------------------------------------------------------------*/
.color-yellow {
    color: #ff0000;
    font-weight: 600;
}
.acm-calendar {
    width: 100%;
}
.current-month {
    width: 100%;
    padding: 20px 50px;
    box-sizing: border-box;
    text-align: center;
    background: #000000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.current-month i {
    color: #fff;
    font-size: 2em;
    cursor: pointer;
    padding: 10px 15px;;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.current-month i:hover {
    background: rgba(255, 255, 255, 0.1);
}
.current-month .cm-data h1 {
    font-size: 1.4em;
    font-family: 'amcap_eternalregular';
    color: #ff0000;
    text-transform: uppercase;
}
.current-month .cm-data .cm-day {
    color: #fff;
    line-height: 30px;
    display: none;
}
.week-days {
    width: 100%;
    padding: 20px 0;
    font-family: 'amcap_eternalregular';
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.week-days .wd-day {
    font-size: 1.125em;
    color: #fff;
    width: calc(100% / 7);
    display: flex;
    justify-content: center;
    align-items: center;
}
.days {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: rgba(41, 41, 41, 0.5);
}
.days .day {
    width: calc(100% / 7);
    text-align: center;
    padding: 20px 0;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.days .day:hover:not(.today) {
    background: rgba(0, 0, 0, 0.19);
    border: 1px solid rgba(255, 255, 255, 0.17);
    cursor: pointer;
}
.day-number {
    font-size: 1em;
    margin-bottom: 6px;
    color: #fff;
}
/*
.prev-date,
.next-date {
    opacity: 0.3;
}
*/
.today {
    background: rgba(0, 0, 0, 0.5);
    font-weight: 700;
    color: #ff0000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
}
.today:hover {
    border: 1px solid #ff0000;
}
.prev-month-day {
    color: rgba(255, 255, 255, 0.3);
}
.day-app-dot {
    height: 6px;
    width: 6px;
    border-radius: 6px;
    background: #ff0000;
    display: inline-block;
}

/* PAGINATION */
.page-numbers {
    margin-top: 20px;
}
.page-numbers .number {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.875em;
    font-weight: 600;
    height: 30px;
    text-align: center;
    margin-right: 5px;
    float: left;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.page-numbers button:hover {
    background: #ff0000;
    color: #000;
}
.page-numbers .nr-dots {
    height: 30px;
    float: left;
    color: #fff;
    margin-right: 5px;
}
.page-numbers .prev-next {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.875em;
    font-weight: 600;
    height: 30px;
    text-align: center;
    padding: 0 10px;
    margin-right: 5px;
    float: left;
}

.day-app {
    height: 1000px;
    margin-top: 20px;
}
.day-app-hours {
    float: left;
    width: 60px;
    background: #000;
    position: relative;
}
.day-app-items {
    width: 100%;
    float: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}
.day-app-hour {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    font-size: 0.875em;
    color: #fff;
}
.day-app-top {
    height: 80px;
    position: sticky;
    top: 0;
    padding-left: 70px;
    background: rgb(0, 0, 0);
    z-index: 2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dat-btn {
    text-decoration: none;
    display: inline-block;
    float: left;
    padding: 15px;
    background: #ff0000;
    color: #fff;
    font-size: 0.875em;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.dat-btn i {
    margin-right: 10px;
    color: #ffffff;
}
.dat-btn:hover {
    color: #ff0000;
    border: 1px solid #ff0000;
}
.day-app-item {
    height: 80px;
    background: rgba(41, 41, 41, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    padding: 5px 5px 5px 70px;
    position: relative;
    display: table;
    width: 100%;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.day-app-item::before {
    position: absolute;
    content: "07:00";
    left: 0;
    top: 0;
    height: 100%;
    width: 60px;
    background: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.appointment {
    height: auto;
    box-sizing: border-box;
    padding: 5px;
    background: #000;
    display: table-cell;
    color: #ffffff;
    font-size: 0.875em;
    line-height: 20px;
    cursor: pointer;
    border: 3px solid rgb(0, 0, 0);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.appointment .appointment-mentions {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    margin-top: 5px;
    padding: 5px 0;
    text-shadow: 0px 0px 5px #000;
    box-sizing: border-box;
}
.appointment:hover {
    box-shadow: 0px 0px 30px #000;
    z-index: 10;
}
.off-hour::before {
    color: rgba(255, 255, 255, 0.36);
}
.day-app-item:hover {
    border-bottom: 1px solid #ff0000;
    background: rgba(255, 255, 255, 0.1);
}
.day-app-item:hover::before {
    color: #ff0000;
}
.hour7::before {
    content: "07:00";
}
.hour75::before {
    content: "07:30";
}
.hour8::before {
    content: "08:00";
}
.hour85::before {
    content: "08:30";
}
.hour9::before {
    content: "09:00";
}
.hour95::before {
    content: "09:30";
}
.hour10::before {
    content: "10:00";
}
.hour105::before {
    content: "10:30";
}
.hour11::before {
    content: "11:00";
}
.hour115::before {
    content: "11:30";
}
.hour12::before {
    content: "12:00";
}
.hour125::before {
    content: "12:30";
}
.hour13::before {
    content: "13:00";
}
.hour135::before {
    content: "13:30";
}
.hour14::before {
    content: "14:00";
}
.hour145::before {
    content: "14:30";
}
.hour15::before {
    content: "15:00";
}
.hour155::before {
    content: "15:30";
}
.hour16::before {
    content: "16:00";
}
.hour165::before {
    content: "16:30";
}
.hour17::before {
    content: "17:00";
}
.hour175::before {
    content: "17:30";
}
.hour18::before {
    content: "18:00";
}
.hour185::before {
    content: "18:30";
}
.hour19::before {
    content: "19:00";
}
.hour195::before {
    content: "19:30";
}
.hour20::before {
    content: "20:00";
}
.hour205::before {
    content: "20:30";
}
.hour21::before {
    content: "21:00";
}
.hour215::before {
    content: "21:30";
}
.hour22::before {
    content: "22:00";
}
.hour225::before {
    content: "22:30";
}
.hour23::before {
    content: "23:00";
}
.hour235::before {
    content: "23:30";
}
.hour00::before {
    content: "00:00";
}
.service-color-red {
    background-color: #ff0000 !important;
}
.service-color-dark-red {
    background-color: #9d0000 !important;
}
.service-color-blue {
    background-color: #0093ff !important;
}
.service-color-dark-blue {
    background-color: #0014ff !important;
}
.service-color-yellow {
    background-color: #ff0000 !important;
}
.service-color-dark-yellow {
    background-color: #9f7f00 !important;
}
.service-color-purple {
    background-color: #ba00ff !important;
}
.service-color-dark-purple {
    background-color: #7d00ac !important;
}
.service-color-magenta {
    background-color: #ff00d8 !important;
}
.service-color-orange {
    background-color: #ff8000 !important;
}
.service-color-cyan {
    background-color: #0cdaff !important;
}
.service-color-green {
    background-color: #37ac14 !important;
}
.service-color-dark-green {
    background-color: #398448 !important;
}
.service-color-brown {
    background-color: #724021 !important;
}
.curr-day {
    position: sticky;
    top: 0;
    margin-bottom: -80px;
    z-index: 3;
    height: 80px;
    width: 60px;
    padding: 25px 0;
    box-sizing: border-box;
    text-align: center;
    background: #000;
}
.curr-day p:first-child {
    color: #ff0000;
    font-family: 'amcap_eternalregular';
}
.curr-day p:nth-child(2) {
    color: #fff;
    font-size: 0.875em;
}
.appointment-service-title {
    font-weight: 700;
    text-shadow: 0px 0px 5px #000;
}
.appointment-client-name {
    font-weight: 400;
    text-shadow: 0px 0px 5px #000;
}
/* APPOINTMENT BOX */
.appointment-box {
    position: fixed;
    right: -800px;
    top: 0;
    box-sizing: border-box;
    z-index: 2;
    width: 600px;
    overflow: auto;
    height: 100vh;
    box-shadow: 0px 0px 20px #000000;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    background-image: url(../images/header_pattern.jpg);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.app-box-btns {
    cursor: pointer;
    margin-top: 10px;
    overflow: hidden;
    background: #000;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    left: 0;
    bottom: 0;
}
.app-box-btns a {
    display: inline-block;
    text-decoration: none;
    padding: 10px;
    box-sizing: border-box;
    margin-right: 10px;
    font-size: 0.875em;
    color: rgb(255, 255, 255);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: #000000;
}
.app-box-btns a i {
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.3);
}
.app-box-btns .app-edit i {
    color: #ff0000;
}
.app-box-btns .app-edit:hover {
    color: #ff0000;
    border: 1px solid #ff0000;
}
.app-box-btns .app-edit:hover i {
    color: #ff0000;
}
.app-box-btns .app-cancel {
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid rgba(255, 0, 0, 0.2);
}
.app-box-btns .app-cancel i {
    color: #ff0000;
}
.app-box-btns .app-cancel:hover {
    color: #ff0000;
    border: 1px solid #ff0000;
}
.app-box-btns .app-cancel:hover i {
    color: #ff0000;
}
.app-box-btns .app-delete i {
    color: rgba(255, 255, 255, 0.3);
}
.app-box-btns .app-delete:hover {
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.app-box-btns .app-delete:hover i {
    color: rgb(255, 255, 255);
}
.app-box-btns .app-finish {
    background: rgba(29, 255, 0, 0.33);
    border: 1px solid rgba(29, 255, 0, 0.33);
}
.app-box-btns .app-finish i {
    color: #1dff00;
}
.app-box-btns .app-finish:hover {
    color: #1dff00;
    border: 1px solid #1dff00;
}
.app-box-btns .app-finish:hover i {
    color: #1dff00;
}
.app-box-head {
    padding: 30px;
    box-sizing: border-box;
    background: #000000;
    overflow: hidden;
    position: relative;
}
.app-box-head p {
    font-family: 'amcap_eternalregular';
    color: #ffffff;
    text-align: center;
}
.app-box-head a {
    padding: 5px 10px;
    box-sizing: border-box;
    background: #1d1d1d;
    color: #fff;
    float: left;
}
.app-box-content {
    padding: 20px;
    box-sizing: border-box;
}
.app-box-content .app-box-info {
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    background: rgba(0, 0, 0, 0.49);
}
.app-box-content .app-box-info i {
    margin-right: 20px;
    color: rgba(255, 255, 255, 0.3);
    width: 20px;
    text-align: center;
}
.app-box-price {
    color: #ff0000;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    font-size: 1.5em;
    margin-top: 30px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.app-box-aditional {
    padding: 20px 20px 20px 15px;
    box-sizing: border-box;
}
.app-box-aditional p {
    font-size: 0.875em;
    line-height: 20px;
    color: white;
    margin-bottom: 5px;
}
.app-box-aditional p i {
    margin-right: 25px;
    color: rgba(255, 255, 255, 0.3);
}
.app-box-services {
    margin-top: 10px;
    margin-bottom: 10px;
}
.app-box-services li {
    color: rgb(255, 255, 255);
    padding: 5px;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 0.875em;
    line-height: 25px;
    text-shadow: 0px 0px 5px #000;
    margin-bottom: 5px;
    display: block;
    width: 100%;
    position: relative;
}
.appointment-show {
    right: 0;
}
.new-app-show {
    right: 0;
}
.app-box-name {
    color: #ff0000 !important;
    font-weight: 700;
}

.app-box-close {
    width: 40px;
    height: 40px;
    border: 0;
    top: calc(50% - 20px);
    background: #272727;
    float: left;
    position: absolute;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}
.app-box-close i {
    color: #717171;
}
.app-box-close:hover i {
    color: #fff;
}
.app-box-waranty {
    margin-top: 20px;
}
.waranty-box {
    padding: 20px 20px 20px 60px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.waranty-box:hover {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.02);
}
.waranty-box::before {
    position: absolute;
    content: "\f573";
    left: 0;
    top: 0;
    height: 100%;
    background: rgba(0, 0, 0, 1);
    width: 50px;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    text-align: center;
    padding-top: 20px;
    box-sizing: border-box;
}
.waranty-box-title {
    font-weight: 700;
    font-size: 0.875em;
    color: #fff;
    margin-bottom: 10px;
}
.waranty-box-end-date {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
    line-height: 25px;
}
.waranty-box-end-date span {
    color: #ff0000;
    font-weight: 700;
}
.waranty-box-vin {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
    line-height: 25px;
}
.waranty-box-vin span {
    color: #fff;
}
.waranty-box-mentions {
    color: rgb(255, 255, 255);
    font-weight: 300;
    line-height: 25px;
}

.waranty-box-active:hover {
    background: rgba(31, 136, 0, 0.1);
    border: 1px solid rgba(31, 136, 0, 0.5);
}
.waranty-box-active::after {
    position: absolute;
    content: "ACTIVA";
    font-size: 1em;
    color: rgb(31, 136, 0);
    bottom: 10px;
    left: 17px;
    width: 50px;
    height: 50px;
    z-index: 1;
    visibility: visible;
    font-weight: 700;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.waranty-box-active::before {
    color: rgb(31, 136, 0);
}
.waranty-box-active .waranty-box-end-date span {
    color: rgb(31, 136, 0);
}
.waranty-box-expired:hover {
    background: rgba(255, 0, 0, 0.09);
    border: 1px solid rgba(255, 0, 0, 0.28);
}
.waranty-box-expired::after {
    position: absolute;
    content: "EXPIRATA";
    font-size: 1em;
    color: #ff0000;
    bottom: 10px;
    left: 17px;
    width: 50px;
    height: 50px;
    z-index: 1;
    visibility: visible;
    font-weight: 700;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.waranty-box-expired::before {
    color: #ff0000;;
}
.waranty-box-expired .waranty-box-end-date span {
    color: #ff0000;
}
/* NEW APPOINTMENT */
.new-app {
    position: fixed;
    top: 0;
    right: 0;
    width: 600px;
    background: #000;
    height: 100vh;
    overflow: auto;
    z-index: 1000;
    box-shadow: 0px 0px 20px #000000;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    background-image: url(../images/header_pattern.jpg);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    right: -700px;
}
.new-app .new-app-header {
    padding: 30px;
    box-sizing: border-box;
    background: #fff;
    background: rgb(0, 0, 0);
    position: relative;
}
.new-app .new-app-header p {
    color: #ff0000;
    text-align: center;
    font-family: 'amcap_eternalregular';
}
.new-app .new-app-header .new-app-close {
    width: 40px;
    height: 40px;
    border: 0;
    top: calc(50% - 20px);
    background: #242424;
    float: left;
    position: absolute;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}
.new-app .new-app-header .new-app-close:hover i {
    color: #fff;
}
.new-app .new-app-content {
    padding: 20px;
    box-sizing: border-box;
}
.new-app .new-app-content .new-app-section {
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.3);

}
.new-app .new-app-content .new-app-section i {
    margin-right: 20px;
    color: rgba(255, 255, 255, 0.3);
    width: 20px;
    text-align: center;
}
.new-app .new-app-content .new-app-field {
    position: relative;
}
.new-app .new-app-content .new-app-field::before {
    position: absolute;
    content: "";
    width: 40px;
    text-align: center;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    line-height: 40px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.new-app .new-app-content .new-app-field:hover::before {
    color: #ff0000;
}
.new-app .new-app-content .field-search::before {
    content: "\f002";
}
.new-app .new-app-content .field-name::before {
    content: "\f234";
}
.new-app .new-app-content .field-phone::before {
    content: "\f879";
}
.new-app .new-app-content .field-car::before {
    content: "\f1b9";
}
.new-app-content input[type="text"],
.new-app-content input[type="tel"] {
    padding: 10px 10px 10px 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.1);
    line-height: 20px;
}
.new-app-content input[type="text"]:hover,
.new-app-content input[type="tel"]:hover {
    box-shadow: 0px 0px 5px rgba(255, 0, 0, 0.5);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.new-app-content input[type="text"]:focus,
.new-app-content input[type="tel"]:focus {
    box-shadow: 0px 0px 5px #ff0000;
}
.new-app-content .new-client {
    background: #ff0000;
    color: #000;
    text-decoration: none;
    display: block;
    width: 150px;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    font-size: 0.875em;
    font-weight: 700;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.new-app-content .new-client:hover {
    box-shadow: 0px 0px 10px #ff0000;
}
.new-app-content .new-client i {
    margin-right: 10px;
    color: #000000;
}
.new-app-content .client-found {
    padding: 10px;
    box-sizing: border-box;
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: none;
}
.new-app-content .add-new-client {
    margin-top: 10px;
    display: none;
}
.app-save-btn {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: rgb(0, 0, 0);
    border: 1px solid #ff0000;
    color: #fff;
    font-size: 0.875em;
    font-weight: 700;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.app-save-btn:hover {
    background: rgba(255, 0, 0, 0.5);
}
.app-save-btn i {
    margin-right: 20px;
    color: #ff0000;
}
.new-app-content .add-service {
    margin-top: 40px;
}
.new-app-content .service-container {
    display: block;
    position: relative;
    font-size: 0.875em;
    padding: 15px;
    box-sizing: border-box;
    color: #fff;
    overflow: hidden;
    background: #000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.new-app-content .service-container label {
    cursor: pointer;
    line-height: 25px;
    text-shadow: 0px 0px 4px #000;
    font-weight: 700;
}
.new-app-content .service-container input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    float: left;
    margin-right: 20px;
    font: inherit;
    color: rgba(255, 255, 255, 0.1);
    width: 25px;
    height: 25px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    position: relative;
}
.new-app-content .service-container:hover {
    box-shadow: 0px 0px 10px rgba(255, 0, 0, 0.5);
}
.new-app-content .service-container input:checked::before {
    position: absolute;
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    color: #fff;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    left: 0;
    top: 0;
}
.service-red input {
    border: 2px solid #ff0000 !important;
}
.service-blue input {
    border: 2px solid #0093ff !important;
}
.service-yellow input {
    border: 2px solid #ff0000 !important;
}
.service-purple input {
    border: 2px solid #ba00ff !important;
}
.service-red .item-selected {
    background: #ff0000;
}
.service-blue .item-selected {
    background: #0093ff;
}
.service-yellow .item-selected {
    background: #ff0000;
}
.service-purple .item-selected {
    background: #ba00ff;
}
.new-app-show {
    right: 0;
}
.set-date {
    margin-top: 40px;
}
/* ADD WARANTY */
.add-waranty {
    margin-top: 40px;
}
.new-waranty-field {
    position: relative;
}
.new-waranty-field::before {
    position: absolute;
    content: "\f573";
    width: 40px;
    text-align: center;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    line-height: 40px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.new-waranty-field:hover::before {
    color: #ff0000;
}
.add-waranty-btn {
    background: #ff0000;
    color: #000;
    text-decoration: none;
    display: block;
    width: 200px;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    margin-top: 20px;
    font-size: 0.875em;
    font-weight: 700;
}
.add-waranty-btn i {
    margin-right: 10px;
}
.add-waranty-btn:hover {
    box-shadow: 0px 0px 10px #ff0000;
    color: #000;
}
.waranty-fields {
    display: none;
    margin-bottom: 40px;
}
/* ADD CAR */
.add-car {
    margin-top: 40px;
}
.app-price input[type="text"] {
    padding: 20px;
    text-align: center;
    font-size: 1.5em;
}

.app-pa-service {
    padding: 10px;
    box-sizing: border-box;
}

.new-app-content textarea {
    width: 100%;
    height: 300px;
    box-sizing: border-box;
    padding: 10px ;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.1);
    line-height: 20px;
    color: #fff;
    font-size: 1em;
    font-family: 'Exo 2', sans-serif;
}
.new-app-content .save-app {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Exo 2', sans-serif;
    font-family: 'amcap_eternalregular';
    padding: 20px;
    margin-top: 20px;
    background: #ff0000;
    border: 1px solid #ff0000;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.new-app-content .save-app:hover {
    box-shadow: 0px 0px 10px #ff0000;
}
.set-date input {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);;
    padding: 10px;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
}
/* SERVICES PAGE */
.acm-container .acm-services {

}
.acm-container .acm-services .service-item {
    padding: 20px 20px 20px 60px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    border: 1px solid transparent;
    margin-bottom: 10px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.acm-container .acm-services .service-item:hover {
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.acm-container .acm-services .service-item::before {
    position: absolute;
    content: "";
    left: 20px;
    height: 100%;
    width: 20px;
    height: 20px;
    background: #383838;
}
.acm-container .acm-services .service-item .service-item-name {
    font-weight: 600;
    color: #fff;
    line-height: 20px;
    float: left;
}
.service-red::before {
    background: #ff0000 !important;
}
.service-blue::before {
    background: #0093ff !important;
}
.service-#ef2929::before{
    background: #ef2929 !important;
}
.service-yellow::before {
    background: #ff0000 !important;
}
.service-orange::before {
    background: #ff8000 !important;
}
.service-purple::before {
    background: #ba00ff !important;
}
.service-brown::before {
    background:#724021 !important;
}
.acm-container .acm-services .service-item .service-item-actions {
    float: right;
    overflow: hidden;
}
.acm-container .acm-services .service-item .service-item-actions button {
    border: none;
    padding: 0 10px;
    background: transparent;
    box-sizing: border-box;
    margin-left: 10px;
}
.acm-container .acm-services .service-item .service-item-actions button i {
    color: rgba(255, 255, 255, 0.5);
}
.acm-container .acm-services .service-item .service-item-actions .si-edit:hover i {
    color: #ff0000;
}
.acm-container .acm-services .service-item .service-item-actions .si-delete:hover i {
    color: #ff0000;
}
.acm-content .acm-container .acm-section-title {
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    overflow: hidden;
}
.acm-content .acm-container .acm-section-title i {
    margin-right: 20px;
}
.acm-content .acm-container .acm-section-title .client-title {
    font-size: 1.4em;
    color: #ff0000;
    font-family: 'amcap_eternalregular';
    float: left;
    line-height: 35px;
}
.si-delete {
    padding: 10px;
    background: transparent;
    border: 1px solid #ffffff33;
    color: rgb(255 255 255 / 46%);
}

.acm-content .acm-container .acm-add-service {
    text-align: center;
    width: 100%;
    margin-top: 20px;
    background: #ff0000;
    border: 1px solid #ff0000;
    padding: 20px;
    box-sizing: border-box;
    font-weight: 600;
    font-size: 0.875em;
    font-family: "Exo 2", sans-serif;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.acm-content .acm-container .acm-add-service i {
    margin-right: 10px;
}
.acm-content .acm-container .acm-add-service:hover {
    box-shadow: 0px 0px 10px #ff0000;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
/* CLIENTS PAGE */
.acm-content .acm-container .client-box {
    padding: 10px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    border: 1px solid transparent;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.acm-content .acm-container .client-box:hover {
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.acm-content .acm-container .client-box:hover .client-name {
    color: #ff0000;
}
.acm-content .acm-container .client-box .client-name {
    font-weight: 600;
    color: #fff;
    float: left;
}
.client-counter {
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #ff0000;
    font-family: 'Exo 2', sans-serif !important;
    font-weight: 700;
    float: right;
}
.acm-content .acm-container .box-search input[type="text"] {
    text-align: center;
    padding: 15px;
}
.acm-add-service-container {
    margin-top: 20px;
    box-sizing: border-box;
    display: none;
}
.acm-add-service-container .acm-add-service-title {
    margin-top: 0;
    font-size: 1.5em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
}
.acm-add-service-container input[type="text"] {
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.acm-add-service-container input[type="color"] {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 2px;
    box-sizing: border-box;
    background: #000;
    margin-bottom: 30px;
}
.acm-add-service-container p {
    color: #fff;
    margin-bottom: 10px;
    margin-top: 20px;
}
.acm-content .acm-container .client-box-btns  {
  float: right;
    position: center;
}
.acm-content .acm-container .client-box-btns button {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 10px;
}

.acm-content .acm-container .client-box-btns .client-delete:hover {
    color: #ff0000;
}
.acm-content .acm-container .client-box-btns .client-edit:hover {
    color: #ff0000;
}
/* CLIENT PAGE */
.client-edit-box {
    background: rgba(0, 0, 0, 0.5);
}
.client-edit-box .client-eb-head {
    padding: 30px;
    box-sizing: border-box;
    background: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}
.client-edit-box .client-eb-head p {
    font-weight: 700;
    color: #fff;
    float: left;
}
.client-edit-box .client-eb-content {
    padding: 30px;
    box-sizing: border-box;
}

.client-edit-box .client-eb-content p {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}
.client-edit-box .client-eb-content p:hover {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.client-edit-box .client-eb-content p i {
    margin-right: 20px;
    width: 30px;
    text-align: center;
    color: #ff0000;
}
.client-edit-box .client-eb-content .client-eb-edit {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-top: 30px;
    padding: 20px;
    box-sizing: border-box;
    font-size: 0.875em;
    font-weight: 700;
    background: #ff0000;
    border: 1px solid #ff0000;
}
.client-edit-box .client-eb-content .client-eb-edit i {
    margin-right: 10px;
}
.client-edit-box .client-eb-content .client-eb-edit:hover {
    background: #000;
    color: #fff;
}
.client-eb-fields {
    margin-top: 20px;
    display: none;
}
.client-eb-fields input[type="text"],
.client-eb-fields input[type="tel"],
.client-eb-fields input[type="email"] {
    padding: 15px;
    text-align: center;
}
.client-eb-fields .client-eb-save {
    display: block;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 20px;
    text-decoration: none;
    font-size: 0.875em;
    color: #000000;
    font-weight: 700;
    background: #ff0000;
}
.client-eb-fields .client-eb-save:hover {
    box-shadow: 0px 0px 10px #ff0000;
}
.acm-cb-profile .acm-profile-title {
    font-weight: 700;
    color: #ff0000;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    margin-top: 30px;
}
.acm-cb-profile .acm-profile-title i {
    margin-right: 10px;
}
.acm-cb-profile .acm-profile-info {
    padding: 15px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}
.acm-cb-profile .acm-profile-info i {
    color: rgba(255, 255, 255, 0.1);
    margin-right: 20px;
}
.acm-cb-profile .acm-profile-info:hover {
    border-bottom: 1px solid #ff0000;
}
.acm-cb-profile .acm-profile-info:hover i {
    color: rgba(255, 255, 255, 0.3);
}
.acm-cb-profile .acm-profile-password {
    margin-top: 20px;
    display: none;
}
.acm-cb-profile .acm-profile-password input[type="password"] {
    padding: 15px;
}
.acm-cb-profile .acm-profile-btn-edit {
    margin-top: 20px;
}
.acm-btn-yellow {
    text-decoration: none;
    padding: 10px;
    background: #ff0000;
    border: 1px solid #ff0000;
    font-size: 0.875em;
    font-weight: 700;
    color: #000;
}
.acm-btn-red {
    text-decoration: none;
    padding: 10px;
    border: 1px solid #ff0000;
    background: #ff0000;
    font-size: 0.875em;
    font-weight: 700;
    color: #000;
}
.acm-btn-cancel {
    text-decoration: none;
    padding: 10px;
    border: 1px solid #626262;
    background: #626262;
    font-size: 0.875em;
    font-weight: 700;
    color: #000;
}
.acm-btn-cancel:hover {
    box-shadow: 0px 0px 10px #ffffff;
    color: #fff;
}
.acm-btn-yellow i {
    margin-right: 10px;
}
.acm-btn-red i {
    margin-right: 10px;
}
.acm-btn-cancel i {
    margin-right: 10px;
}
.acm-btn-small {
    display: inline-block;
}
.acm-btn-center {
    margin-left: auto;
    margin-right: auto;
}
.acm-btn-full {
    width: 100%;
    display: block;
    text-align: center;
}
.acm-btn-yellow:hover {
    box-shadow: 0px 0px 10px #ff0000;
    color: #000;
}
.acm-btn-red:hover {
    box-shadow: 0px 0px 10px #ff0000;
    color: #000;
}
.acm-btn-yellow i {
    margin-right: 10px;
}
.acm-cb-profile .acm-profile-edit {
    margin-top: 20px;
    margin-bottom: 20px;
    display: none;
}
#client-list {
    margin-top: 30px;
}

.acm-cb-profile .acm-profile-edit input {
    padding: 15px;
}
.acm-cb-profile .acm-profile-password-save {
    margin-top: 20px;
}
/* POPUP CONFIRMATION */
.popup-confirmation {
    position: fixed;
    z-index: 3000;
    color: #fff;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    justify-content: center;
    align-items: center;
}
.popup-confirmation .popup-c-box {
    width: 600px;
    height: 300px;
    background-image: url(../images/login-bg.png);
    background-color: #000000;
    background-size: 150%;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    box-shadow: 0px 0px 20px #ff0000;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.popup-confirmation .popup-c-box:hover {
    box-shadow: 0px 0px 50px #ff0000;
}
.popup-confirmation .popup-c-box .popup-head {
    background-image: url(../images/header_pattern.jpg);
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    border-bottom: 3px solid rgba(255, 255, 255, 0.1);
}
.popup-confirmation .popup-c-box .popup-head p {
    font-family: 'amcap_eternalregular';
    font-size: 1.125em;
    color: #ff0000;
}
.popup-confirmation .popup-c-box .popup-actions {
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}
.popup-confirmation .popup-c-box .popup-actions p {
    margin-top: 30px;
    margin-bottom: 30px;
    font-weight: 500;
    text-shadow: 0px 0px 20px #000000;
}
.popup-confirmation .popup-c-box .popup-actions button {
    display: block;
    width: 60%;
}
.popup-confirmation .popup-c-box .popup-actions .popup-cancel {
    margin-bottom: 10px;
}
/* INPUT ERROR */
.input-error {
    padding: 15px;
    background: rgb(54, 18, 18);
    box-sizing: border-box;
    margin-top: 20px;
    margin-bottom: 5px;
}
.input-error p {
    font-size: 0.875em;
    font-weight: 500;
    color: #fff;
}
.input-error p i {
    margin-right: 10px;
    color: #ff0000;
}
.validation-code-success {
    padding: 15px;
    background: rgb(21, 128, 0);
    box-sizing: border-box;
    margin-top: 20px;
    margin-bottom: 5px;
}
.validation-code-success p {
    font-size: 0.875em;
    font-weight: 500;
    color: #fff;
}
.validation-code-success p i {
     margin-right: 10px;
}
.client-selected {
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 10px 10px 20px;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 10px;
}
.client-selected .client-selected-name {
    float: left;
    font-weight: 600;
    color: #ff0000;
    line-height: 30px;
}
.client-selected .client-selected-remove {
    float: right;
    padding: 2px 10px;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    color: #ff0000;
    font-size: 1.250em;
}
/* PAGINATION */
.page-numbers {
    margin-top: 20px;
}
.page-numbers .number {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.875em;
    font-weight: 600;
    height: 30px;
    text-align: center;
    margin-right: 5px;
    float: left;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.page-numbers .number:hover {
    background: #ff0000;
    color: #000;
}
.page-numbers .nr-dots {
    height: 30px;
    float: left;
    color: #fff;
    margin-right: 5px;
}
/* STAFF */
.acm-content .acm-container .staff-box {
    padding: 20px 20px 20px 60px;
    position: relative;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    border: 1px solid transparent;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.acm-content .acm-container .staff-box:hover {
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.acm-content .acm-container .staff-admin:hover {
    border: 1px solid rgba(255, 0, 0, 0.5);
}
.acm-content .acm-container .staff-box:hover .staff-name {
    color: #ff0000;
}
.acm-content .acm-container .staff-box .staff-name {
    font-weight: 600;
    color: #fff;
    float: left;
}
.acm-content .acm-container .staff-admin::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 40px;
    height: 100%;
    background: #ff0000;
}
.acm-content .acm-container .staff-admin::after {
    position: absolute;
    content: "ADMIN";
    left: 0;
    top: 25px;
    color: #000000;
    width: 40px;
    text-align: center;
    font-weight: 600;
    font-size: 0.7em;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.acm-content .acm-container .staff-staff::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 40px;
    height: 100%;
    background: greenyellow;
}
.acm-content .acm-container .staff-staff::after {
    position: absolute;
    content: "STAFF";
    left: 0;
    top: 25px;
    color: #000000;
    width: 40px;
    text-align: center;
    font-weight: 600;
    font-size: 0.7em;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}

.acm-content .acm-container .staff-team::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 40px;
    height: 100%;
    background: rgb(255, 255, 255);
}
.acm-content .acm-container .staff-team::after {
    position: absolute;
    content: "TEAM";
    left: 0;
    top: 25px;
    color: #000000;
    font-weight: 600;
    font-size: 0.7em;
    width: 40px;
    text-align: center;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.acm-content .acm-container .acm-add-staff {
    text-align: center;
    width: 100%;
    margin-top: 20px;
    background: #ff0000;
    border: 1px solid #ff0000;
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
    font-weight: 600;
    font-size: 0.875em;
    font-family: "Exo 2", sans-serif;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.acm-content .acm-container .acm-add-staff i {
    margin-right: 10px;
}
.acm-content .acm-container .acm-add-staff:hover {
    box-shadow: 0px 0px 10px #ff0000;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

.acm-content .acm-container .acm-add-team {
    text-align: center;
    width: 100%;
    margin-top: 20px;
    background: #ff0000;
    border: 1px solid #ff0000;
    padding: 20px;
    box-sizing: border-box;
    font-weight: 600;
    font-size: 0.875em;
    color: #fff;
    font-family: "Exo 2", sans-serif;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.acm-content .acm-container .acm-add-team i {
    margin-right: 10px;
}
.acm-content .acm-container .acm-add-team:hover {
    box-shadow: 0px 0px 10px #ff0000;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.acm-content .acm-container .staff-box .staff-box-actions {
    float: right;
}
.acm-content .acm-container .staff-box .staff-box-actions button {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 10px;
}
.acm-content .acm-container .staff-box:hover button {
    color: #fff;
}
.acm-content .acm-container .staff-box .staff-delete:hover {
    color: #ff0000;
}
.acm-content .acm-container .staff-box .staff-edit:hover {
    color: #ff0000;
}
.acm-content .acm-container .staff-box .staff-actions:hover {
    color: greenyellow;
}
.acm-content .acm-container .create-staff-box {
    margin-top: 30px;
/*    display: none;*/
}
.acm-content .acm-container .create-staff-box .csb-input {
    position: relative;
}
.acm-content .acm-container .create-staff-box .csb-input:hover::before {
    color: #ff0000;
}

.acm-content .acm-container .create-team-box {
    margin-top: 30px;
/*    display: none;*/
}
.acm-content .acm-container .create-team-box .csb-input {
    position: relative;
}
.acm-content .acm-container .create-team-box .csb-input:hover::before {
    color: #ff0000;
}

.csb-input::before {
    position: absolute;
    content: "\f0e0";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #fff;
    z-index: 1;
    width: 50px;
    text-align: center;
    line-height: 50px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
.csb-name::before {
    content: "\f007";
}
.csb-tel::before {
    content: "\f879";
}
.csb-pass::before {
    content: "\f023";
}
.acm-content .acm-container .create-staff-box .csb-select-power {
    margin-top: 30px;
}

.create-client-box {
    margin-top: 30px;
    display: none;

}
/* LOADER */
.loading-box {
    padding: 30px;
    background: rgba(0, 0, 0, 0.5);
}
.loading-box .loading-circle {
    border: 10px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    border-top: 10px solid #ff0000;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
    margin-left: auto;
    margin-right: auto;
}
/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loading-box .loading-title {
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 20px;
    font-size: 0.875em;
}