* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --btncolor: #e52427;
    --seccolor: #ffffff;
    --redcolor: #c61317;
    --bgcolor: #F5F5F5;
    --textcolor: #000000;
    --headercolor: linear-gradient(180deg, #E52427 0%, #AF070A 100%);
}


a {
    text-decoration: none;
    color: #000000;

}

body, button, input, ::placeholder, label, textarea, select{
    background-color: var(--bgcolor);
    font-family: 'B yekan';
    direction: rtl;
    border: none;
    outline: none;
}
button {
    cursor: pointer !important;
}
.w-100 {
    width: 100%;
}

.f-21 {
    font-size: 21px;
}
.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.login .title {
    color: var(--textcolor);
    font-size: 21px;
    font-weight: bold;
}

.login .login-input {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.login .login-input p {
    color: var(--textcolor);
    font-size: 21px;
    direction: ltr;
}

.login .login-input .user-id {
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    width: 75%;
    height: 38px;
    padding: 0 10px;
    font-size: 17px;
}

.login .login-input .password {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    width: 75%;
    height: 38px;
    padding: 0 10px;
}

.login .password input {
    font-size: 17px;
}

.login .login-input button {
    background-color: var(--btncolor);
    width: 75%;
    height: 38px;
    border-radius: 6px;
    color: var(--seccolor);
    font-size: 19px;
    display: block;
}

.login .login-link {
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
}

.login .login-link .login-link-inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login .login-link img {
    width: 18px;
    height: 20px;
    margin-left: 10px;
}
.login .login-link a {
    font-size: 15px;
    font-weight: 400;
    border-bottom: 1px solid #115da9;
    color: #115da9;
}
.register-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 0 4%;
}

.register-form p {
    color: var(--textcolor);
    font-size: 21px;
    font-weight: bold;
}

.register-form .select-radio {
    width: 100%;
    display: flex;
    align-items: center;
}

.register-form .select-radio input {
    margin-left: 5px;
}


.register-form .select-radio label {
    margin-left: 35px;
}


.register-form button {
    background-color: var(--btncolor);
    width: 75%;
    height: 38px;
    border-radius: 6px;
    color: var(--seccolor);
    font-size: 19px;
}

.signup-form {
    padding: 0 4%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.signup-form input, textarea {
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    height: 30px;
    padding: 5px;
    font-size: 12px;
}

.signup-form .xsmall-input {
    width: calc(48% - 10px);
}
.signup-form .small-input {
    width: calc(52% - 10px);
}
.signup-form .medium-input {
    width: 100%;
    margin: 3px 0;
}
.signup-form .large-input {
    width: 65%;
    margin: 3px 0;
}
.signup-form .extra-input {
    width: 100%;
    height: 55px;
    resize: none;
}
.header-small{
    background: var(--headercolor);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6% 2%;
}

.header-small p {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 19px;
    color: #ffffff;
}
.header-medium{
    background: var(--headercolor);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6% 3.6%;
}

.header-medium p {
    text-align: center;
    font-size: 19px;
    color: #ffffff;
    width: 100%;
}

.header-medium img {
    width: 25px;
    height: 25px;
    display: flex;
}
.know-register {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 3%;
    gap: 35px;
}

.know-register p {
    color: var(--textcolor);
}

.know-register button {
    width: 75%;
    height: 38px;
    border: none;
    background-color: #E52427;
    border-radius: 6px;
    font-size: 21px;
    color: var(--seccolor);
}

.know-register .know-register-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.know-register .know-register-form .choose {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.know-register .know-register-form .choose p {
    font-size: 15px;
    font-weight: 700;
}

/* dropdown */

.selectdiv {
    position: relative;

}

.selectdiv:after {
    /*content: '\f0d7';*/
    font: normal normal normal 22px FontAwesome;
    color: var(--textcolor);
    left: 10px;
    padding: 5px 0 0 0;
    position: absolute;
}

select::-ms-expand {
    display: none;
}

.selectdiv select {
    appearance: none;
    width: 175px;
    height: 27px;
    padding: 0px 10px;
    font-size: 16px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
}

.know-register .know-register-form .title {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    gap: 30px;
}

.know-register .know-register-form .title .icons {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.know-register .know-register-form .title .icons .icons-item {
    display: flex;
}

.know-register .know-register-form .title .icons .icons-item img {
    width: 21px;
    height: 18px;
}

.know-register .know-register-form .title .icons .icons-item p {
    font-size: 12px;
    margin-right: 5px;
}

.know-register .know-register-form .text-input {
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    height: 30px;
    padding: 5px;
    font-size: 12px;

    width: 100%;
    height: 55px;
    resize: none;
}
.header-final {
    background: var(--headercolor);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6% 3.6%;
}

.header-final p {
    text-align: center;
    font-size: 19px;
    color: var(--seccolor);
    width: 100%;
}

.header-final .left {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.header-final .left .User {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.header-final .left .User .caret-down {
    font-size: 25px;
    height: 15px;
    display: flex;
    color: var(--seccolor);

}
.header-final a i {
    font-size: 30px;
    font-weight: 100;
    display: flex;
    color: var(--seccolor);
}

.header-final img {
    width: 25px;
    height: 25px;
    display: flex;
}
.main-page {
    padding: 0 8%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.main-page a  {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(30% - 10px);
    color: var(--textcolor);
}

.main-page a .main-page-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}



.main-page a .main-page-items p {
    font-size: 13px;
    text-align: center;
}
.main-bars-menu {
    background-color: #e5e5e5;
    z-index: 111;

}

.main-bars-menu p {
    padding: 6px;
    font-size: 18px;
    font-weight: 500;
    margin-right: 5px;
}

.main-bars-menu .items i {
    font-size: 10px;
}

.main-bars-menu .items {
    display: flex;
    align-items: center;
    padding: 0 13px;
}

.main-bars-menu .line {
    color: #a4a4a4;
}
.main-user-menu {
    width: 100%;
    height: 25%;
    background-color: #e5e5e5;
    padding: 20px 15px;
    display: flex;
    justify-content: space-between;
    z-index: 111;
}
.main-user-menu p {
    font-size: 13px;
    font-weight: 400;
}

.main-user-menu .right {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-user-menu .right .items {
    display: flex;
    align-items: center
}

.main-user-menu .right .items img {
    width: 25px;
    height: 25px;
}


.main-user-menu .right .items p {
    margin-right: 10px;
}

.w-30 {
    width: 30px !important;
}

.mr-15 {
    margin-right: 15px !important;
}

.main-user-menu .left {
    display: flex;
}
.main-user-menu .left .uploads {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.work-manage-table {
    padding: 0 2%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.work-manage-table .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.work-manage-table .header .right , .left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.work-manage-table .header .right img {
    width: 30px;
    height: 30px;
}

.work-manage-table .header .right p {
    font-size: 18px;
    font-weight: 700;
}

.work-manage-table .header .right i {
    font-size: 16px;
    padding: 4px 5px;
    color: var(--seccolor);
    background-color: #EC0B28;
    border-radius: 100%;
}




.h-40 {
    flex: 1 0 40%;
}
.h-20 {
    flex: 0 1 20%;
}


.work-manage-table .nowrap {
    white-space: nowrap;
}

.work-manage-table .form {
    width: 100%;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.work-manage-table .form p {
    text-align: center;
}


.work-manage-table .form .head div,.items div, .last-item div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 5px;
}

.work-manage-table .form .head {
    display: flex;
    width: 100%;
    background-color: #DFE7EB;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid var(--textcolor);
}

.work-manage-table .form .head p {
    font-size: 13px;
    font-weight: 400;
}


.work-manage-table .form .items {
    display: flex;
    width: 100%;
    background-color: var(--seccolor);
    border-bottom: 1px solid var(--textcolor);
}


.work-manage-table .form .items p , .last-item p {
    font-size: 12px;
    font-weight: 400;
}

.work-manage-table .form .last-item {
    display: flex;
    width: 100%;
    background-color: var(--seccolor);
    border-radius: 0 0 6px 6px;
}
.h-30 {
    flex: 0 0 30%;
}

.h-50 {
    flex: 0 0 50%;
}
.h-70 {
    flex: 0 0 70%;
}

.f-13 {
    font-size: 13px;
    font-weight: 400;
}

.f-12 {
    font-size: 12px;
    font-weight: 400;
}

.work-manage-showcase {
    padding: 0 2%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.work-manage-showcase .box {
    width: 100%;
    padding: 20px 10px;
    background-color: #ECECEC;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.work-manage-showcase .box .item {
    display: flex;
    justify-content: start;
    align-items: center;
}

.work-manage-showcase .box .item .call-info , .loc-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.work-manage-showcase .box .item .call-info .row , .loc-info .row {
    display: flex;
    justify-content: start;
    align-items: center;
}
.work-showcase-header {
    padding: 0 2%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.work-showcase-header .top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.work-showcase-header .top img {
    width: 33px;
    height: 28px;
}

.work-showcase-header .top p {
    font-size: 18px;
    font-weight: 700;
}

.work-showcase-header .title {
    display: flex;
    align-items: center;
    gap: 20px;
}

.work-showcase-header .title p {
    font-size: 15px;
    font-weight: 400;
}
.add-work-manage {
    padding: 0 3%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.add-work-manage .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-work-manage .header .right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-work-manage .header .right img {
    width: 33px;
    height: 28px;
}

.add-work-manage .header .right p {
    font-size: 18px;
    font-weight: 700;
}

.add-work-manage .items , .drop-items , .rial-items {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

.add-work-manage .items p {
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
}

.add-work-manage .items input {
    width: 100%;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    height: 27px;
    padding: 0px 10px;
    font-size: 12px;
}



.dropdown-buy {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.dropdown-buy label {
    width: 100%;
}

.dropdown-buy i {
    position: absolute;
    left: 30px;
}

.dropdown-buy:after {
    content: '\f0d7';
    font: normal normal normal 22px FontAwesome;
    color: var(--textcolor);
    left: 10px;
    position: absolute;
}

select::-ms-expand {
    display: none;
}

.dropdown-buy select {
    appearance: none;
    width: 100%;
    height: 30px;
    padding: 0px 10px;
    font-size: 16px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
}


.add-work-manage .rial-items div {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.add-work-manage .rial-items p {
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
}

.add-work-manage .rial-items input {
    width: 70%;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    height: 27px;
    padding: 0px 10px;
    font-size: 12px;
    margin-right: 15px;
}

.add-work-manage button {
    width: 75%;
    height: 38px;
    border: none;
    background-color: #E52427;
    border-radius: 6px;
    margin-top: 17px;
    font-size: 21px;
    color: var(--seccolor);
}

.add-work-manage .btn-item {
    display: flex;
    justify-content: center;
}
.edit-work-manage {
    padding: 0 3%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.edit-work-manage .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit-work-manage .header .right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.edit-work-manage .header .right img {
    width: 33px;
    height: 28px;
}

.edit-work-manage .header .right p {
    font-size: 18px;
    font-weight: 700;
}

.edit-work-manage .items , .drop-items , .rial-items {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

.edit-work-manage .items p {
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
}

.edit-work-manage .items input {
    width: 100%;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    height: 27px;
    padding: 0px 10px;
    font-size: 12px;
}



.dropdown-buy {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.dropdown-buy label {
    width: 100%;
}

.dropdown-buy i {
    position: absolute;
    left: 30px;
}

.dropdown-buy:after {
    content: '\f0d7';
    font: normal normal normal 22px FontAwesome;
    color: var(--textcolor);
    left: 10px;
    position: absolute;
}

select::-ms-expand {
    display: none;
}

.dropdown-buy select {
    appearance: none;
    width: 100%;
    height: 30px;
    padding: 0px 10px;
    font-size: 16px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
}


.edit-work-manage .rial-items div {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.edit-work-manage .rial-items p {
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
}

.edit-work-manage .rial-items input {
    width: 70%;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    height: 27px;
    padding: 0px 10px;
    font-size: 12px;
    margin-right: 15px;
}

.edit-work-manage button {
    width: 75%;
    height: 38px;
    border: none;
    background-color: #E52427;
    border-radius: 6px;
    margin-top: 17px;
    font-size: 21px;
    color: var(--seccolor);
}

.edit-work-manage .btn-item {
    display: flex;
    justify-content: center;
}
.ups-center-form {
    padding: 0 2%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ups-center-form .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ups-center-form .head p {
    text-align: center;
    font-size: 13px;
    font-weight: 400;
}

.ups-center-form .header .right , .left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ups-center-form .header .right img {
    width: 30px;
    height: auto;
}

.ups-center-form .header .right p {
    font-size: 18px;
    font-weight: 700;
}

.ups-center-form .header .right .fa-plus {
    font-size: 16px;
    padding: 3px 5px;
    color: var(--seccolor);
    background-color: #EC0B28;
    border-radius: 100%;
}



.ml-5 {
    margin-left: 5px;
}
.h-30 {
    flex: 1 0 30%;
}
.h-25 {
    flex: 0 0 25%;
}
.h-20 {
    flex: 0 0 20%;
}
.h-10 {
    flex: 0 0 10%;
}
.h-5 {
    flex: 0 0 5%;
}


.ups-center-form .nowrap {
    /*white-space: nowrap;*/
    flex-wrap: wrap;
}

.ups-center-form .form {
    width: 100%;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.ups-center-form .form .head div,.items div, .last-item div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px 5px;
}

.ups-center-form .form .head {
    display: flex;
    width: 100%;
    background-color: #DFE7EB;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid var(--textcolor);
}


.ups-center-form .form .items {
    display: flex;
    width: 100%;
    background-color: var(--seccolor);
    border-bottom: 1px solid var(--textcolor);
}

.ups-center-form .flex-col {
    display: flex;
    flex-direction: column;

}


.ups-center-form .form .items p , .last-item p {
    font-size: 12px;
    font-weight: 400;
    text-align: center;
}

.ups-center-form .form .last-item {
    display: flex;
    width: 100%;
    background-color: var(--seccolor);
    border-radius: 0 0 6px 6px;
}
.add-ups-center {
    padding: 0 4%;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.add-ups-center .header {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.add-ups-center .header img {
    width: 30px;
    height: auto;
}

.add-ups-center .header p {
    font-size: 18px;
    font-weight: 700;
}

.add-ups-center .center-name {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 15px;
}

.add-ups-center .center-name p , .title p , .location p , .addres p , .share-map p {
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
}

.add-ups-center .center-name input {
    width: 60%;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    font-size: 12px;
    padding: 5px 7px;
}

.add-ups-center .call-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.add-ups-center .call-info .title {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 5px;
}

.add-ups-center .call-info .title i {
    font-size: 16px;
    padding: 3px 5px;
    color: var(--seccolor);
    background-color: #EC0B28;
    border-radius: 100%;
}

.add-ups-center .call-info .form {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-ups-center .call-info .form input {
    width: calc(50% - 5px);
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    font-size: 12px;
    padding: 5px 7px;
}

.add-ups-center .location {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 7px;
}

.add-ups-center .location .share-map {
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-ups-center .addres {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.add-ups-center .addres textarea {
    width: 100%;
    height: 70px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    font-size: 14px;
    padding: 5px 7px;
    resize: none;
}

.add-ups-center .crashed-alarm {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 30px;
}

.add-ups-center .crashed-alarm p {
    font-size: 15px;
    font-weight: 400;
    color: #115DA9;
    border-bottom: 1px solid #115DA9;
    white-space: nowrap;
}


.dropdown-add-ups {
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown-add-ups i {
    position: absolute;
    left: 30px;
}

.dropdown-add-ups:after {
    content: '\f0d7';
    font: normal normal normal 22px FontAwesome;
    color: var(--textcolor);
    left: 10px;
    position: absolute;
}

select::-ms-expand {
    display: none;
}

.dropdown-add-ups select {
    appearance: none;
    width: 200px;
    height: 27px;
    padding: 0px 10px;
    font-size: 16px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
}
.add-ups-center button{
    width: 75%;
    height: 38px;
    border: none;
    background-color: #E52427;
    border-radius: 6px;
    margin-top: 17px;
    font-size: 21px;
    color: var(--seccolor);
}
.add-ups-center .btn-item{
    display: flex;
    justify-content: center;
}
.edit-ups-center {
    padding: 0 4%;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.edit-ups-center .header {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.edit-ups-center .header img {
    width: 30px;
    height: auto;
}

.edit-ups-center .header p {
    font-size: 18px;
    font-weight: 700;
}

.edit-ups-center .center-name {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 15px;
}

.edit-ups-center .center-name p , .title p , .location p , .addres p , .share-map p {
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
}

.edit-ups-center .center-name input {
    width: 60%;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    font-size: 12px;
    padding: 5px 7px;
}

.edit-ups-center .call-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.edit-ups-center .call-info .title {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 5px;
}

.edit-ups-center .call-info .title i {
    font-size: 16px;
    padding: 3px 5px;
    color: var(--seccolor);
    background-color: #EC0B28;
    border-radius: 100%;
}

.edit-ups-center .call-info .form {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.edit-ups-center .call-info .form input {
    width: calc(50% - 5px);
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    font-size: 12px;
    padding: 5px 7px;
}

.edit-ups-center .location {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 15px;
}

.edit-ups-center .location .share-map {
    display: flex;
    align-items: center;
    gap: 10px;
}

.edit-ups-center .addres {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.edit-ups-center .addres textarea {
    width: 100%;
    height: 70px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    font-size: 14px;
    padding: 5px 7px;
    resize: none;
}

.edit-ups-center .crashed-alarm {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 30px;
}

.edit-ups-center .crashed-alarm p {
    font-size: 15px;
    font-weight: 400;
    color: #115DA9;
    border-bottom: 1px solid #115DA9;
    white-space: nowrap;
}


.dropdown-add-ups {
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown-add-ups i {
    position: absolute;
    left: 30px;
}

.dropdown-add-ups:after {
    content: '\f0d7';
    font: normal normal normal 22px FontAwesome;
    color: var(--textcolor);
    left: 10px;
    position: absolute;
}

select::-ms-expand {
    display: none;
}

.dropdown-add-ups select {
    appearance: none;
    width: 200px;
    height: 27px;
    padding: 0px 10px;
    font-size: 16px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
}

.edit-ups-center .btns {
    width: 100%;
    display: flex;
    align-items: center;
}

.edit-ups-center .btns .main-btn {
    width: 60%;
}

.edit-ups-center .btns .delete {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.edit-ups-center .btns .main-btn button {
    width: 100%;
    height: 38px;
    border: none;
    background-color: #E52427;
    border-radius: 6px;
    font-size: 21px;
    color: var(--seccolor);
}
.ups-manage span {
    font-family: 'arial';
}

.ups-manage {
    padding: 0 2%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ups-manage .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ups-manage .header .right , .left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ups-manage .header .right img {
    width: 30px;
    height: auto;
}

.ups-manage .header .right p {
    font-size: 18px;
    font-weight: 700;
}

.ups-manage .header .right .fa-plus {
    font-size: 16px;
    padding: 3px 5px;
    color: var(--seccolor);
    background-color: #EC0B28;
    border-radius: 100%;
}



.link-style {
    color: #115DA9;
    border-bottom: 1px solid #115DA9;
}


.h-30 {
    flex: 1 0 30%;
}
.h-20 {
    flex: 0 1 20%;
}
.h-10 {
    flex: 0 0 10%;
}


.ups-manage .nowrap {
    /*white-space: nowrap;*/
}

.ups-manage .form {
    width: 100%;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.ups-manage .form .head div,.items div, .last-item div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px 5px;
}

.ups-manage .form .head {
    display: flex;
    width: 100%;
    background-color: #DFE7EB;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid var(--textcolor);
}


.ups-manage .head img {
    width: 30px;
    height: auto;
}
.ups-manage .head p {
    text-align: center;
    font-size: 13px;
    font-weight: 400;
}


.ups-manage .form .items {
    display: flex;
    width: 100%;
    background-color: var(--seccolor);
    border-bottom: 1px solid var(--textcolor);
}

.ups-manage .form .items img , .last-item img{
    width: 15px;
    height: auto;
}

.ups-manage .form .items p , .last-item p {
    font-size: 10px;
    font-weight: 400;
    text-align: center;
}

.ups-manage .form .last-item {
    display: flex;
    width: 100%;
    background-color: var(--seccolor);
    border-radius: 0 0 6px 6px;
}

.ups-manage .form .items .problem , .last-item .problem {
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
}

.ups-manage .form .items .problem .date , .last-item .problem .date {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ups-manage .form .items .situation , .last-item .situation {
    direction: ltr;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
    justify-content: start;
}

.green {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 5px;
    background-color: #10AE6C;
    border-radius: 100%;
    color: var(--seccolor);
    font-size: 10px;
}
.yellow {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 5px;
    background-color: #FFBB24;
    border-radius: 100%;
    color: var(--textcolor);
    font-size: 10px;
}
.red {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 5px;
    background-color: #FF0000;
    border-radius: 100%;
    color: var(--seccolor);
    font-size: 10px;
}
.ups-add .link-style {
    color: #115DA9;
    border-bottom: 1px solid #115DA9;
}

.ups-add {
    padding: 0 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ups-add .header {
    width: 100%;
    justify-content: start;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ups-add .header p {
    font-size: 18px;
    font-weight: 700;
}

.ups-add .info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
}

.ups-add .info p {
    font-size: 15px;
}



.ups-add button {
    width: 75%;
    height: 38px;
    border: none;
    background-color: #E52427;
    border-radius: 6px;
    margin-top: 17px;
    font-size: 21px;
    color: var(--seccolor);
}

.ups-add .form {
    padding: 10px 12px;
    width: 95%;
    border: 1px solid var(--textcolor);
    background-color: #ECECEC;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    gap: 13px;
}

.ups-add .form .list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.ups-add .form .list .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ups-add .form .list .item div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ups-add .form .list .item div i {
    font-size: 16px;
    padding: 3px 5px;
    color: var(--seccolor);
    background-color: #EC0B28;
    border-radius: 100%;
}

.ups-add .form .list .item div p {
    font-size: 15px;
    font-weight: 400;
}

.ups-add .form .list .item input {
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    height: 30px;
    padding: 5px;
    font-size: 12px;
    width: 50%;
}

.dropdown-conection {
    position: relative;
    display: flex;
    align-items: center;
    width: 50%;
}

.dropdown-conection label {
    width: 100%;
}

.dropdown-conection i {
    position: absolute;
    left: 30px;
}

.dropdown-conection:after {
    content: '\f0d7';
    font: normal normal normal 22px FontAwesome;
    color: var(--textcolor);
    left: 10px;
    position: absolute;
}

select::-ms-expand {
    display: none;
}

.dropdown-conection select {
    appearance: none;
    width: 100%;
    height: 30px;
    padding: 0px 10px;
    font-size: 16px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
}


.ups-add .item .date-show {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 50%;
    gap: 7px;
}

.ups-add .item .date-show input {
    width: 100% !important;
}

.ups-add .item .date-show i {
    font-size: 21px;
    color: var(--redcolor);
}

.ups-add .item .right {
    display: flex;
    align-items: center;
    gap: 3px;
}

.ups-add .form textarea {
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    height: 60px;
    padding: 5px;
    font-size: 15px;
    width: 100%;
    resize: none;
}

.ups-add .form textarea::placeholder {
    color: var(--textcolor);
    font-size: 15px;
}

.ups-add .form input[type="date"]::-webkit-calendar-picker-indicator {
    display: block;
    background: no-repeat;
}
.information-battery .mr-5 {
    margin-right: 5px;
}
.information-battery {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #FFEA7A;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
}

.information-battery .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.information-battery .title i {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: var(--seccolor);
    padding: 5px 6px;
    background-color: var(--textcolor);
    border-radius: 100%;
}

.information-battery .title div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.information-battery .title img {
    filter: brightness(0);
}

.information-battery .title p {
    font-size: 14px;
    font-weight: 700;
}

.information-battery .info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.information-battery .info span {
    font-size: 12px;
    font-weight: 700;
    color: #E52427;
}

.information-battery .info p {
    font-size: 12px;
    font-weight: 700;
}
.add-user-table {
    padding: 0 2%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.add-user-table .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-user-table .head img {
    width: auto;
    height: 25px;
}

.add-user-table .header .right , .left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-user-table .header .right img {
    width: 31px;
    height: 37px;
}

.add-user-table .header .right p {
    font-size: 18px;
    font-weight: 700;
}

.add-user-table .header .right .fa-plus {
    font-size: 16px;
    padding: 3px 5px;
    color: var(--seccolor);
    background-color: #EC0B28;
    border-radius: 100%;
}

.add-user-table .header .right .fa-search {
    font-size: 18px;
    color: #EC0B28;
}




.h-40 {
    flex: 0 1 40%;
}
.h-20 {
    flex: 1 0 20%;
}


.add-user-table .nowrap {
    white-space: nowrap;
}

.add-user-table .form {
    width: 100%;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.add-user-table .form .head div,.items div, .last-item div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 5px;
}

.add-user-table .form .head {
    display: flex;
    width: 100%;
    background-color: #DFE7EB;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid var(--textcolor);
}


.add-user-table .form .items {
    display: flex;
    width: 100%;
    background-color: var(--seccolor);
    border-bottom: 1px solid var(--textcolor);
}

.add-user-table .justify-start {
    display: flex;
    justify-content: start;
    margin-right: 2%;
}


.add-user-table .form .items p , .last-item p {
    font-size: 12px;
    font-weight: 400;
    margin-right: 10px;
}

.add-user-table .form .last-item {
    display: flex;
    width: 100%;
    background-color: var(--seccolor);
    border-radius: 0 0 6px 6px;
}
.add-contact {
    padding: 0 3%;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.add-contact .header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.add-contact .header p {
    font-size: 18px;
    font-weight: 700;
}
.add-contact .header  img {
    width: 23px;
    height: 28px;
}

.add-contact .form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.add-contact .form input {
    width: calc(50% - 10px);
    height: 27px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    padding: 0 10px;
    font-size: 12px;
}

.add-contact .form input::placeholder {
    color: var(--textcolor);
    font-size: 13px;
}

.add-contact .access-select , .group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.add-contact .access-select img , .group img {
    width: 31px;
    height: auto;
}




.dropdown-form-access {
    position: relative;
    display: flex;
    align-items: center;
    width: 55%;
}

.dropdown-form-access label {
    width: 100%;
}

.dropdown-form-access i {
    position: absolute;
    left: 30px;
}

.dropdown-form-access:after {
    content: '\f0d7';
    font: normal normal normal 22px FontAwesome;
    color: var(--textcolor);
    left: 10px;
    position: absolute;
}

select::-ms-expand {
    display: none;
}

.dropdown-form-access select {
    appearance: none;
    width: 100%;
    height: 30px;
    padding: 0px 10px;
    font-size: 15px;
    font-weight: 400;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
}

.add-contact .group p {
    font-size: 15px;
    font-weight: 400;
}



.add-contact button {
    width: 75%;
    height: 38px;
    border: none;
    background-color: #E52427;
    border-radius: 6px;
    margin-top: 17px;
    font-size: 21px;
    color: var(--seccolor);
}

.add-contact .btn-form {
    display: flex;
    justify-content: center;
}


.add-contact .custom-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
}

.add-contact .custom-checkbox .checkbox {
    width: 16px;
    height: 16px;
    border: 2px solid var(--textcolor);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.add-contact .custom-checkbox .checkbox img {
    width: 14px;
    height: 11px;

}
.edit-contact {
    padding: 0 3%;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.edit-contact .header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.edit-contact .header p {
    font-size: 18px;
    font-weight: 700;
}
.edit-contact .header  img {
    width: 23px;
    height: 28px;
}

.edit-contact .form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.edit-contact .form input {
    width: calc(50% - 10px);
    height: 27px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    padding: 0 10px;
    font-size: 12px;
}

.edit-contact .form input::placeholder {
    color: var(--textcolor);
    font-size: 13px;
}

.edit-contact .access-select , .group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.edit-contact .access-select img , .group img {
    width: 31px;
    height: auto;
}




.dropdown-form-access {
    position: relative;
    display: flex;
    align-items: center;
    width: 55%;
}

.dropdown-form-access label {
    width: 100%;
}

.dropdown-form-access i {
    position: absolute;
    left: 30px;
}

.dropdown-form-access:after {
    content: '\f0d7';
    font: normal normal normal 22px FontAwesome;
    color: var(--textcolor);
    left: 10px;
    position: absolute;
}

select::-ms-expand {
    display: none;
}

.dropdown-form-access select {
    appearance: none;
    width: 100%;
    height: 30px;
    padding: 0px 10px;
    font-size: 15px;
    font-weight: 400;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
}

.edit-contact .group p {
    font-size: 15px;
    font-weight: 400;
}



.edit-contact button {
    width: 75%;
    height: 38px;
    border: none;
    background-color: #E52427;
    border-radius: 6px;
    margin-top: 17px;
    font-size: 21px;
    color: var(--seccolor);
}

.edit-contact .btn-form {
    display: flex;
    justify-content: center;
}


.edit-contact .custom-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
}

.edit-contact .custom-checkbox .checkbox {
    width: 16px;
    height: 16px;
    border: 2px solid var(--textcolor);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.edit-contact .custom-checkbox .checkbox img {
    width: 14px;
    height: 11px;
}
.add-user-showcase {
    padding: 0 4%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.add-user-showcase .title p {
    font-size: 18px;
    font-weight: 700;
}

.add-user-showcase .info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.add-user-showcase .info p {
    font-size: 13px;
}

.add-user-showcase .info p:last-child {
    margin-right: 5px;
}

.add-user-showcase .info .row {
    width: 50%;
    display: flex;
    align-items: center;

}
.user-roles-main .mr-s {
    margin-right: 40px !important;
}

.user-roles-main .mr-neg-s {
    margin-right: -8px !important;
}

.user-roles-main .f-12 {
    font-size: 12px !important;
}

.user-roles-main {
    padding: 0 0.5%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.user-roles-main .box {
    max-width: 100%;
    display: flex;
}

.user-roles-main .checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid var(--textcolor);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.user-roles-main .box .right {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    width: 60px;
    background-color: #DADADA;
    border-radius: 0 6px 6px 0;
    gap: 4px;
}

.user-roles-main .box .right img   {
    width: 25px;
    height: auto;
}


.user-roles-main .box .left {
    width: 100%;
    background-color: #EDEDED;
    border-radius: 6px 0 0 6px;
    display: flex;
    flex-wrap: wrap;
    padding: 5px 10px;
    gap: 5px 15px;
}

.user-roles-main .box .left .items {
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 5px;
}

.user-roles-main .box .left .items p {
    font-size: 15px;
    font-weight: 400;

}


.user-roles-main .description {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-roles-main .description p {
    font-size: 15px;
    font-weight: 400;

}
.user-roles-main .description input {
    width: 100%;
    height: 27px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    padding: 7px;
    font-size: 12px;
}

.user-roles-main .description input::placeholder {
    color: var(--textcolor);
}
.user-roles-header {
    padding: 0 3%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.user-roles-header .title {
    width: 100%;
    justify-content: start;
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-roles-header .title img {
    width: 34px;
    height: 34px;
}

.user-roles-header .title p {
    font-size: 18px;
    font-weight: 700;
}

.user-roles-header .title i {
    font-size: 16px;
    padding: 3px 5px;
    color: var(--seccolor);
    background-color: #EC0B28;
    border-radius: 100%;
}

.user-roles-header .access {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 15px;
}

.user-roles-header .access p {
    font-size: 15px;
    font-weight: 400;
    color: #0D1452;
    border-bottom: 1px solid #0D1452;
    white-space: nowrap;
}

.user-roles-header .access .active-access {
    background-color: #E52427;
    padding: 5px 10px;
    border-radius: 6px;
}

.user-roles-header .access .active-access p {
    color: var(--seccolor);
    border-bottom: 1px solid var(--seccolor);
    white-space: nowrap;
}

.user-roles-header .edit {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-roles-header .edit .right {
    display: flex;
    align-items: center;
    gap: 7px;
}
.user-roles-header .edit .right p {
    font-size: 15px;
    font-weight: 400;
}

.user-roles-header .edit .left {
    display: flex;
    justify-content: end;
    align-items: center;

}
.user-roles-header .edit .left img {
    width: 29px;
    height: auto;
}
.user-roles-main .btn-form{
    display: flex;
    justify-content: center;
}
.user-roles-main button{
    width: 75%;
    height: 38px;
    border: none;
    background-color: #E52427;
    border-radius: 6px;
    margin-top: 17px;
    font-size: 21px;
    color: var(--seccolor);
}
.sent-sms {
    padding: 0 2%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sent-sms .header {
    padding: 0 2%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sent-sms .header .left , .right{
    display: flex;
    align-items: center;
    gap: 10px;
}

.sent-sms .header p {
    font-size: 18px;
    font-weight: 700;
}

.dropdown-sms {
    position: relative;
    display: flex;
    align-items: center;
    width: 50px;
}

.dropdown-sms label {
    width: 100%;
}

.dropdown-sms i {
    position: absolute;
    left: 30px;
}

.dropdown-sms:after {
    content: '\f0d7';
    font: normal normal normal 19px FontAwesome;
    color: var(--textcolor);
    left: 10px;
    position: absolute;
}

select::-ms-expand {
    display: none;
}

.dropdown-sms select {
    appearance: none;
    width: 100%;
    height: 30px;
    padding: 0px 5px;
    font-size: 16px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
}



.br {
    border-right: 1px solid var(--textcolor);
}

.h-43 {
    flex: 1 0 43%;
}
.h-22 {
    flex: 0 0 22%;
}

.h-10 {
    flex: 0 0 10%;
}


.sent-sms .f-10 {
    font-size: 10px;
}

.sent-sms .nowrap {
    white-space: nowrap;
}

.sent-sms .form {
    width: 100%;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.sent-sms .form p {
    text-align: center;
}


.sent-sms .form .head div,.items div, .last-item div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 5px;
}

.sent-sms .form .head {
    display: flex;
    width: 100%;
    background-color: #DFE7EB;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid var(--textcolor);
}

.sent-sms .form .head p {
    font-size: 13px;
    font-weight: 400;
}


.sent-sms .form .items {
    display: flex;
    width: 100%;
    background-color: var(--seccolor);
    border-bottom: 1px solid var(--textcolor);
}


.sent-sms .form .items p , .last-item p {
    font-size: 12px;
    font-weight: 400;
}

.sent-sms .form .items .date, .last-item .date {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.sent-sms .form .last-item {
    display: flex;
    width: 100%;
    background-color: var(--seccolor);
    border-radius: 0 0 6px 6px;
}
.information-sms .mr-5 {
    margin-right: 5px;
}
.information-sms {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #FFEA7A;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
}

.information-sms .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.information-sms .title i {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: var(--seccolor);
    padding: 5px 6px;
    background-color: var(--textcolor);
    border-radius: 100%;
}

.information-sms .title div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.information-sms .title img {
    filter: brightness(0);
}

.information-sms .title p {
    font-size: 14px;
    font-weight: 700;
}

.information-sms .info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.information-sms .info p {
    font-size: 13px;
    font-weight: 400;
}
.battery-selection {
    padding: 0 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.battery-selection .select {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown i {
    position: absolute;
    left: 30px;
}

.dropdown:after {
    content: '\f0d7';
    font: normal normal normal 22px FontAwesome;
    color: var(--textcolor);
    left: 10px;
    position: absolute;
}

select::-ms-expand {
    display: none;
}

.dropdown select {
    appearance: none;
    width: 200px;
    height: 27px;
    padding: 0px 10px;
    font-size: 16px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
}
.battery-selection .btn-form{
    display: flex;
    justify-content: center;
}
.battery-selection button{
    width: 75%;
    height: 38px;
    border: none;
    background-color: #E52427;
    border-radius: 6px;
    margin-top: 17px;
    font-size: 21px;
    color: var(--seccolor);
}
.view-battery-header {
    padding: 0 4%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.view-battery-header .head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.view-battery-header .head .info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.view-battery-header .head .info p {
    font-size: 13px;
}

.view-battery-header .head .info .row {
    width: 50%;
    display: flex;
    align-items: center;
    gap: 5px;
}

.view-battery-header .head .info .row img {
    width: 20px;
    height: 20px;
}

.dropdown-ups {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.dropdown-ups:after {
    content: '\f0d7';
    font: normal normal normal 22px FontAwesome;
    color: var(--textcolor);
    left: 20px;
    position: absolute;
}

select::-ms-expand {
    display: none;
}

.dropdown-ups select {
    appearance: none;
    width: 90%;
    height: 25px;
    padding: 0px 10px;
    font-size: 13px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
}
.add-battery {
    padding: 0 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.add-battery .header {
    width: 100%;
    justify-content: start;
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-battery .header i {
    font-size: 16px;
    padding: 3px 5px;
    color: var(--seccolor);
    background-color: #EC0B28;
    border-radius: 100%;
}

.add-battery .header p {
    font-size: 18px;
    font-weight: 700;
}

.add-battery .info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.add-battery .info p {
    font-size: 15px;
}

.add-battery .info p:last-child {
    margin-right: 10px;
}

.add-battery .info .row {
    width: 50%;
    display: flex;
    align-items: center;

}

.add-battery button {
    width: 75%;
    height: 38px;
    border: none;
    background-color: #E52427;
    border-radius: 6px;
    margin-top: 17px;
    font-size: 21px;
    color: var(--seccolor);
}

.add-battery .form {
    padding: 10px 12px;
    width: 95%;
    border: 1px solid var(--textcolor);
    background-color: #ECECEC;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    gap: 55px;
}

.add-battery .form .list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.add-battery .form .list .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-battery .form .list .item p {
    font-size: 15px;
    font-weight: 400;
}

.add-battery .form .list .item input {
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    height: 30px;
    padding: 5px;
    font-size: 12px;
    width: 50%;
}

.dropdown-conection {
    position: relative;
    display: flex;
    align-items: center;
    width: 50%;
}

.dropdown-conection label {
    width: 100%;
}

.dropdown-conection i {
    position: absolute;
    left: 30px;
}

.dropdown-conection:after {
    content: '\f0d7';
    font: normal normal normal 22px FontAwesome;
    color: var(--textcolor);
    left: 10px;
    position: absolute;
}

select::-ms-expand {
    display: none;
}

.dropdown-conection select {
    appearance: none;
    width: 100%;
    height: 30px;
    padding: 0px 10px;
    font-size: 16px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
}


.add-battery .item .date-show {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 50%;
    gap: 7px;
}

.add-battery .item .date-show input {
    width: 100% !important;
}

.add-battery .item .date-show i {
    font-size: 21px;
    color: var(--redcolor);
}

.add-battery .item .right {
    display: flex;
    align-items: center;
    gap: 3px;
}

.add-battery .form textarea {
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    height: 60px;
    padding: 5px;
    font-size: 15px;
    width: 100%;
    resize: none;
}

.add-battery .form textarea::placeholder {
    color: var(--textcolor);
    font-size: 15px;
}

.add-battery .form input[type="date"]::-webkit-calendar-picker-indicator {
    display: block;
    background: no-repeat;
}
.sent-call {
    padding: 0 2%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sent-call .header {
    padding: 0 3%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sent-call .header .left , .right{
    display: flex;
    align-items: center;
    gap: 10px;
}

.sent-call .header p {
    font-size: 18px;
    font-weight: 700;
}

.dropdown-call {
    position: relative;
    display: flex;
    align-items: center;
    width: 50px;
}

.dropdown-call label {
    width: 100%;
}

.dropdown-call i {
    position: absolute;
    left: 30px;
}

.dropdown-call:after {
    content: '\f0d7';
    font: normal normal normal 19px FontAwesome;
    color: var(--textcolor);
    left: 10px;
    position: absolute;
}

select::-ms-expand {
    display: none;
}

.dropdown-call select {
    appearance: none;
    width: 100%;
    height: 30px;
    padding: 0px 5px;
    font-size: 16px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
}



.br {
    border-right: 1px solid var(--textcolor);
}

.h-43 {
    flex: 1 0 43%;
}
.h-22 {
    flex: 0 0 22%;
}

.h-10 {
    flex: 0 0 10%;
}


.sent-call .f-10 {
    font-size: 10px;
}

.sent-call .nowrap {
    white-space: nowrap;
}

.sent-call .form {
    width: 100%;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.sent-call .form p {
    text-align: center;
}


.sent-call .form .head div,.items div, .last-item div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 5px;
}

.sent-call .form .head {
    display: flex;
    width: 100%;
    background-color: #DFE7EB;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid var(--textcolor);
}

.sent-call .form .head p {
    font-size: 13px;
    font-weight: 400;
}


.sent-call .form .items {
    display: flex;
    width: 100%;
    background-color: var(--seccolor);
    border-bottom: 1px solid var(--textcolor);
}


.sent-call .form .items p , .last-item p {
    font-size: 12px;
    font-weight: 400;
}

.sent-call .form .items .date, .last-item .date {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.sent-call .form .last-item {
    display: flex;
    width: 100%;
    background-color: var(--seccolor);
    border-radius: 0 0 6px 6px;
}
.information-call {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #FFEA7A;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
}

.information-call .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.information-call .title i {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: var(--seccolor);
    padding: 5px 6px;
    background-color: var(--textcolor);
    border-radius: 100%;
}

.information-call .title div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.information-call .title img {
    filter: brightness(0);
}

.information-call .title p {
    font-size: 14px;
    font-weight: 700;
}

.information-call .info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.information-call .info p {
    font-size: 13px;
    font-weight: 400;
}
.warning-page-header {
    padding: 0 3%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.warning-page-header .title {
    width: 100%;
    justify-content: start;
    display: flex;
    align-items: center;
    gap: 5px;
}


.warning-page-header .title p {
    font-size: 18px;
    font-weight: 700;
}

.warning-page-header .title i {
    font-size: 16px;
    padding: 3px 5px;
    color: var(--seccolor);
    background-color: #EC0B28;
    border-radius: 100%;
}

.warning-page-header .access {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}

.warning-page-header .access p {
    font-size: 15px;
    font-weight: 400;
    color: #0D1452;
    border-bottom: 1px solid #0D1452;
    white-space: nowrap;
}

.warning-page-header .access .active-access {
    background-color: #E52427;
    padding: 5px 10px;
    border-radius: 6px;
}

.warning-page-header .access .active-access p {
    color: var(--seccolor);
    border-bottom: 1px solid var(--seccolor);
    white-space: nowrap;
}
.warning-page-form {
    padding: 0 3%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.h-30 {
    flex: 0 0 30%;
}

.h-60 {
    flex: 0 0 60%;
}

.warning-page-form .nowrap {
    white-space: nowrap;
}

.warning-page-form .form {
    padding: 10px 10px;
    width: 100%;
    border: 1px solid var(--textcolor);
    background-color: #ECECEC;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    gap: 15px;
}

.warning-page-form .form .head , .items {
    display: flex;
    align-items: center;
    text-align: center;
    max-width: 100%;
    /*justify-content: space-between;*/
}

.warning-page-form .form .head p {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.warning-page-form .form .items p {
    font-size: 12px;
    font-weight: 400;

}

.warning-page-form .form .items .box {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    background-color: var(--seccolor);
    border: 1px solid var(--textcolor);
    border-radius: 3px;
    padding: 3px 2px;
    gap: 3px;
    flex-wrap: wrap;

}

.warning-page-form .form .items .box i {
    font-size: 14px;
    padding: 2px 4px;
    color: var(--seccolor);
    background-color: #EC0B28;
    border-radius: 100%;
}

.warning-page-form .form .items .edit {
    display: flex;
    align-items: center;
    justify-content: center;
}

.warning-page-form .form .items .edit img {
    width: 13px;
    height: auto;
}
.warning-box {
    background-color: #EDEDED;
    height: 20px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 10px;
    border-radius: 6px;
    width: fit-content;
}

.warning-box span {
    font-size: 9px;
    font-weight: 400;
}

.warning-box i {
    font-size: 9px;
    color: var(--seccolor);
    background-color: var(--redcolor);
    border-radius: 100%;
    padding: 2px 3px;
    /*position: absolute;*/
    left: 0;
    top: 0;
}

.add-user-warning-pattern {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px 0;
    background-color: #ECECEC;
    border-radius: 6px;
    border: 1px solid var(--textcolor);
    width: 100%;
}

.add-user-warning-pattern .title {
    width: 100%;
    display: flex;
    justify-content: start;
    padding: 0 10px;
}

.add-user-warning-pattern .title p {
    font-size: 18px;
    font-weight: 700;
}

.add-user-warning-pattern .search {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    padding: 0 10px;
}

.add-user-warning-pattern .search .fa-plus {
    font-size: 16px;
    padding: 3px 5px;
    color: var(--seccolor);
    background-color: #EC0B28;
    border-radius: 100%;
}
.add-user-warning-pattern .search p {
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
}

.add-user-warning-pattern .search .search-box {
    width: 50%;
    display: flex;
    height: 30px;
    align-items: center;
    border-radius: 6px;
    border: 1px solid var(--textcolor);
    background-color: var(--seccolor);
    gap: 5px;
    padding: 2px 7px;
}

.add-user-warning-pattern .search .search-box input {
    width: 100%;
}

.add-user-warning-pattern .search .search-box input::placeholder {
    background-color: var(--seccolor);
}


.h-40 {
    flex: 0 0 40%;
}
.h-35 {
    flex: 0 0 35%;
}
.h-20 {
    flex: 0 0 20%;
}
.h-15 {
    flex: 0 0 15%;
}

.add-user-warning-pattern .col {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 2px;
}


.add-user-warning-pattern .form {
    display: flex;
    flex-direction: column;
}

.add-user-warning-pattern .form .head {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #DFE7EB;
}

.add-user-warning-pattern .form .check {
    width: 16px;
    height: 16px;
    border: 1px solid var(--textcolor);
}

.add-user-warning-pattern .form .items {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: var(--seccolor);
    padding: 8px 0;
}

.add-user-warning-pattern .form  .items p {
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
}
.add-user-warning-pattern .form .head p {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

.add-user-warning-pattern .form .head div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 3px;
}

.add-user-warning-pattern .form .items div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 3px;
}


.add-user-warning-pattern .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}

.add-user-warning-pattern .btn button {
    width: 80%;
    height: 38px;
    border: none;
    background-color: #E52427;
    border-radius: 6px;
    font-size: 21px;
    color: var(--seccolor);
}
.add-roles-header {
    padding: 0 3%;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.add-roles-header .title {
    width: 100%;
    justify-content: start;
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-roles-header .title img {
    width: 34px;
    height: 34px;
}

.add-roles-header .title p {
    font-size: 18px;
    font-weight: 700;
}

.add-roles-header .pattern-access-name {
    width: 100%;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}


.add-roles-header .pattern-access-name p {
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;

}
.add-roles-header .pattern-access-name input {
    width: 100%;
    height: 27px;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    padding: 7px;
    font-size: 12px;
}

.pattern-access-name .btn-form {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pattern-access-name .btn-form button {
    width: 80%;
    height: 28px;
    border: none;
    background-color: #E52427;
    border-radius: 6px;
    font-size: 16px;
    color: var(--seccolor);
}
.forget-password {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.forget-password p {
    color: var(--textcolor);
    font-size: 21px;
    font-weight: bold;
}

.forget-password input {
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    width: 75%;
    height: 38px;
    padding: 0 10px;
    font-size: 17px;
}

.forget-password button {
    background-color: var(--btncolor);
    width: 75%;
    height: 38px;
    border-radius: 6px;
    color: var(--seccolor);
    font-size: 19px;
}
.ups-log {
    padding: 0 1%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ups-log .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.ups-log .header .right {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ups-log .header .right img {
    width: 30px;
    height: auto;
}

.ups-log .header .right p {
    font-size: 18px;
    font-weight: 700;
}

.ups-log .header .left {
    display: flex;
    align-items: center;
    gap: 20px;
}


.bl {
    border-left: 1px solid var(--textcolor);
}
.br {
    border-right: 1px solid var(--textcolor);
}

.h-60 {
    flex: 0 0 60%;
}
.h-20 {
    flex: 0 0 20%;
}
.ups-log .justify-start {
    justify-content: flex-start;
}

.image-head {
    width: 30px;
    height: auto;
    margin-right: 2px;
}

.ups-log .forms .time , .info {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
}

.ups-log .forms .time p {
    font-size: 10px;
    font-weight: 400;
}


.ups-log .forms {
    width: 100%;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.ups-log .forms .head div,.items div, .last-item div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
}

.ups-log .forms .head {
    display: flex;
    width: 100%;
    background-color: #DFE7EB;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid var(--textcolor);
}

.ups-log .forms .items {
    display: flex;
    width: 100%;
    background-color: var(--seccolor);
    border-bottom: 1px solid var(--textcolor);
}

.ups-log .forms .last-item {
    display: flex;
    width: 100%;
    background-color: var(--seccolor);
    border-radius: 0 0 6px 6px;
}

.ups-log .forms .name p , .info p {
    font-size: 12px;
    font-weight: 400;
    text-align: center;
}
.program-setting {
    display: flex;
    flex-direction: column;
    padding: 0 3%;
    gap: 35px;
}

.program-setting .head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.program-setting .head img {
    width: 34px;
    height: 34px;
}

.program-setting .head p {
    font-size: 18px;
    font-weight: 700;
}

.program-setting .main {
    padding: 0 4%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.program-setting .main a  {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(30% - 10px);
    color: var(--textcolor);
}

.program-setting .main a .program-setting-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.program-setting .main a .program-setting-items p {
   font-size: 19px;
   text-align: center;
}
.bl {
    border-left: 1px solid var(--textcolor);
}
.br {
    border-right: 1px solid var(--textcolor);
}

.h-60 {
    flex: 1 0 55%;
}
.h-20 {
    flex: 0 0 20%;
}

.program-log-form .justify-start {
    justify-content: center;
}



.program-log-form {
    padding: 0 3%;
}

.program-log-form p {
    font-size: 14px;
    font-weight: 400;
}

.program-log-form .forms {
    width: 100%;
    border: 1px solid var(--textcolor);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.program-log-form .forms .head div,.items div, .last-item div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.program-log-form .forms .head {
    display: flex;
    width: 100%;
    background-color: #DFE7EB;
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid var(--textcolor);
}

.program-log-form .forms .items {
    display: flex;
    width: 100%;
    background-color: var(--seccolor);
    border-bottom: 1px solid var(--textcolor);
}

.program-log-form .forms .last-item {
    display: flex;
    width: 100%;
    background-color: var(--seccolor);
    border-radius: 0 0 6px 6px;
}
.program-log-header {
    padding: 0 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.program-log-header .top {
    width: 100%;
    justify-content: start;
    display: flex;
    align-items: center;
    gap: 10px;
}

.program-log-header .top img {
    width: 34px;
    height: 34px;
}

.program-log-header .top p {
    font-size: 18px;
    font-weight: 700;
}

.program-log-header .top i {
    font-size: 16px;
    padding: 4px 5px;
    color: var(--seccolor);
    background-color: #EC0B28;
    border-radius: 100%;
}

.program-log-header button {
    width: 75%;
    height: 38px;
    border: none;
    background-color: #E52427;
    border-radius: 6px;
    margin-top: 17px;
    font-size: 21px;
    color: var(--seccolor);
}