@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Text&display=swap');

body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ul,
li,
a {
   margin: 0;
   padding: 0;
   list-style: none;
   text-decoration: none
}

body {
   background: #f9f9f9;
   font-family: "Poppins";
   font-size: 14px;
}

body.login-body {
   background: #fff;
   width: 100%;
   height: 100vh;
}

.top-navbar {
   padding-top: 5px;
   background: white;
   height: 55px;
   box-shadow: 0 3px 5px rgba(0, 0, 0, .03);
   position: relative;
   z-index: 1;
}

.top-navbar-main {
   display: flex;
   gap: 3rem;
   height: 55px;
   justify-content: space-between
}

.top-navbar-menu>ul {
   display: flex;
   padding-top: 8px;
}

.top-navbar-menu>ul>li>a {
   border-radius: 10px;
   display: flex;
   align-items: center;
   font-weight: 400;
   padding: 0 9px;
   margin: 0 3px;
   line-height: 30px;
   font-size: 15px;
   color: #7b7b7b
}

.top-navbar-menu ul ul li a {
   border-radius: 10px;
   display: flex;
   align-items: center;
   font-weight: 400;
   padding: 2px 9px;
   margin: 0 3px;
   line-height: 30px;
   font-size: 15px;
   color: #7b7b7b
}

.top-navbar-menu>ul>li>a span.icon {
   font-size: 17px
}

.top-navbar-menu>ul>li>ul a span.icon2 {
   font-size: 20px;
   padding-right: 7px;
}

.top-navbar-menu>ul>li:not(:last-child) {
   border-right: solid 1px #f2f2f2;
}

.top-navbar-menu>ul>li>a:hover {
   background-color: #f6f6f6;
}

.top-navbar-menu ul ul {
   display: none;
   padding: 10px;
   background: white;
   position: absolute;
   max-width: 230px;
   min-width: 150px;
   box-shadow: 0 3px 5px rgba(0, 0, 0, .03);
   border-radius: 10px
}

.top-navbar-menu ul ul li a:hover {
   background: #f6f6f6;
}

.top-navbar-right {
   padding-top: 5px;
   scrollbar-width: none;
}

.top-navbar-right a.logout {
   color: #bbb;
   display: block;
   line-height: 55px;
   padding: 0 20px
}

.top-navbar-right a.logout:hover {
   color: #e42c2c;
}

.top-navbar-right a.menu {
   color: #000;
   display: block;
   line-height: 55px;
}

.top-navbar-right a.menu span.icon {
   font-size: 27px
}

.top-navbar-right a.user-info {
   pointer-events: none;
   margin-top: -12px;
   font-weight: 500;
   gap: .3rem;
   color: #7b7b7b;
   align-items: center;
   line-height: 55px;
}

.top-navbar-right a.user-info span.icon {
   font-size: 25px
}

.top-navbar-right {
   display: flex;
   gap: 1rem;
   align-items: center;
}

.main-content .content-title {
   display: flex;
   align-items: center;
   padding: 0 20px;
}

.main-content .content-title .go-back-button {
   color: black;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 35px;
   height: 35px;
   border-radius: 10px
}

.main-content .content-title .go-back-button:hover {
   background: black;
   color: white;
}

.content-table-top {}

.button_1 {
   width: 100%;
   border-radius: 10px;
   padding: 10px 13px;
   border: 0;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: .3rem
}

.button_2 {
   width: 100%;
   border-radius: 10px;
   padding: 14px;
   border: 0;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: .3rem
}

.button_2.darkblue {
   background: #484e7e;
   color: white;
}

.button_1.green {
   background: #19cf19;
   color: white;
}

.button_1.blue {
   background: #3c7cf7;
   color: white;
}

.button_1.green2 {
   background: #30bb60;
   color: white;
}

.button_1.darkblue {
   background: #484e7e;
   color: white;
}

.button_1.darkblue2 {
   background: #282d53;
   color: white;
}

.button_1.orange {
   background: #f89f40;
   color: white;
}

.button_1.purple {
   background: #8e79f4;
   color: white;
}

.button_1.gray {
   background: #bbb;
   color: white;
}

.button_1.red {
   background: #ff1616;
   color: white;
}

.button_1.lightred {
   background: #ffa3a3;
   color: white;
}

.button_1.red.outline {
   background: transparent !important;
   border: solid 2px #ff1616;
   color: #ff1616;
}

.button_1.purple.outline {
   background: transparent !important;
   border: solid 2px #8e79f4;
   color: #8e79f4;
}

.button_1.mini {
   padding: 5px;
   font-weight: 500;
   font-size: 16px
}

.reminder_1 {
   font-size: 12px;
   color: #999;
   font-weight: 500
}

.input_1 {
   padding: 10px 15px;
   border-radius: 10px;
   outline: none;
   border: 0;
   border: solid 1px #ddd;
   background: white;
   width: 100%;
}

.input_1:focus {
   outline: solid 2px #2a62ff;
   border-color: transparent
}

#products .input_1 {
   padding: 5px 10px !important;
   border-radius: 5px !important;
}

.input_2 {
   padding: 15px;
   border-radius: 10px;
   outline: none;
   border: 0;
   border: solid 1px #ddd;
   background: white;
   width: 100%;
}

.checkbox_2 {
   padding: 15px;
}

.input_2:focus {
   outline: solid 2px #2a62ff;
   border-color: transparent
}

.color_1 {
   height: 43px;
   border-radius: 10px;
   outline: none;
   border: 0;
   border: solid 1px #ddd;
   background: white;
   width: 100%;
}

.select_1 {
   padding: 10px 15px;
   border-radius: 10px;
   outline: none;
   border: 0;
   border: solid 1px #ddd;
   background: white;
   width: 100%
}

.textarea_1 {
   padding: 10px 15px;
   border-radius: 10px;
   outline: none;
   border: 0;
   border: solid 1px #ddd;
   background: white;
   width: 100%;
}

.textarea_1:focus {
   outline: solid 2px #2a62ff;
   border-color: transparent
}

.label_1 {
   display: block;
   padding: 5px;
}

.label_2 {
   display: block;
   padding: 8px 10px;
   font-size: 17px;
}

.table_1 {
   width: 100%;
}

.table_1 thead tr {
   background: #bdc3d4;
   color: #43495b;
}

.table_1 thead tr a {
   display: block;
   color: #43495b;
}

.table_1 thead tr th,
.table_1 tbody tr td {
   padding: 10px;
   border: solid 1px #fff;
}

.table_1 tbody tr:nth-child(even) {
   background: #f5f5f5;
}

.table_1 tbody tr:nth-child(odd) {
   background: #fff;
}

.table_1 tbody tr:hover {
   background: #e2e5ee;
   cursor: pointer
}

.table_2 {
   width: 100%;
}

.table_2 tbody tr td {
   padding: 5px 10px;
}

.table_2 tbody tr td.title {
   font-weight: 500;
   border: solid 1px #fff;
   background: #f5f5f5;
   text-align: right;
}

.table_3 {
   width: 100%;
}

.table_3 thead tr {
   background: #bdc3d4;
   color: #43495b;
}

.table_3 thead tr a {
   display: block;
   color: #43495b;
}

.table_3 thead tr th,
.table_3 tbody tr td {
   padding: 5px;
   border: solid 1px #fff;
}

.table_3 tbody tr {
   transition: all .15s !important
}

.table_3 tbody tr:nth-child(even) {
   background: #dadbe2;
}

.table_3 tbody tr:nth-child(odd) {
   background: #fff;
}

.table_3 tbody tr:hover {
   background: #e2e5ee;
   cursor: pointer;
}

.table_3 tbody tr:active {
   background: #d2d6ff
}

.table_4 {
   width: 100%;
}

.table_4 thead tr {
   border-bottom: solid 2px #bdc3d4;
   color: #43495b;
}

.table_4 thead tr a {
   display: block;
   color: #43495b;
}

.table_4 tbody tr td {
   padding: 5px;
   border: solid 1px #eee;
   font-weight: 500
}

.table_4 tbody tr:nth-child(even) {
   background: #dadbe2;
}

.table_4 tbody tr:nth-child(odd) {
   background: #fff;
}

.table_4 tbody tr {
   transition: all .15s !important
}

.table_4 tbody tr:hover {
   background: #e2e5ee;
   cursor: pointer;
}

.table_4 tbody tr:active {
   background: #d2d6ff
}

.table_4 .hidden_area_tr {
   background-color: #484e7e;
}

.table_4 .hidden_row {
   padding: 20px !important
}

.table_4 .hidden_area_tr td {
   padding: 10px
}

.table_4 .hidden_area_tr div {
   position: relative;
   display: flex;
   justify-content: space-between;
   color: white;
}

.table_4 .hidden_area_tr div .area_code {
   font-size: 22px;
   font-weight: 800;
}

.table_4 .hidden_area_tr div .area_name {
   font-size: 40px;
   font-weight: 800;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%)
}

.table_1 .icon.hyphen,
.table_2 .icon.hyphen,
.table_3 .icon.hyphen {
   color: #bbb;
}


.table-pagination {
   display: flex;
   justify-content: end
}

.table-pagination ul {
   display: flex;
}

.table-pagination ul li a {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   background: white;
   box-shadow: 0 3px 5px rgba(0, 0, 0, .03);
   color: #666;
   margin: 1px;
}

.table-pagination ul li a.active {
   font-weight: bold;
   color: #43495b;
   background: #bdc3d4;
}


.content {
   background: white;
   border-radius: 20px;
   box-shadow: 0 5px 10px rgba(0, 0, 0, .03);
   padding: 20px
}

.content h3 {
   align-items: center;
   display: flex;
   gap: .5rem
}

.content h3 span.icon {
   font-size: 30px;
}

.content-tabs {
   max-width: 100%;
   overflow-x: auto
}

.content-tabs ul {
   display: flex;
}

.content-tabs ul li a {
   padding: 8px 12px;
   margin: 0 2px;
   display: flex;
   align-items: center;
   gap: .3rem;
   background-color: #fff;
   color: #666;
   border-radius: 10px
}

.content-tabs ul li a.active {
   font-weight: bold;
   color: #43495b;
   background: #bdc3d4
}

.content-tabs ul li a span.icon {
   font-size: 17px;
}

.x-auto {
   overflow-x: auto
}

.mobile-menu-main {
   -ms-overflow-style: none;
   scrollbar-width: none;
   overflow-y: scroll;
   transition: all .4s ease-in-out;
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   background: white;
   margin-left: -270px;
   width: 270px;
   z-index: 3;
   padding: 20px;
}

.mobile-menu-main h4 {
   border-bottom: solid 1px #f0f0f0;
   padding-bottom: 10px;
   display: flex;
   align-items: center;
   gap: .5rem
}

.mobile-menu-main.active {
   margin-left: 0 !important;
}

.mobile-menu-main>ul>li {
   border-bottom: solid 1px #f2f2f2;
}

.mobile-menu-main>ul>li>a {
   display: block;
   padding: 10px 0;
   color: #7b7b7b;
   display: flex;
   align-items: center;
   justify-content: space-between
}

.mobile-menu-main>ul>li ul {
   display: none;
}

.mobile-menu-main>ul>li ul.active {
   display: block;
}

.mobile-menu-main>ul>li ul li:not(:last-child) {
   border-bottom: solid 1px #f2f2f2;
}

.mobile-menu-main>ul>li ul li a {
   display: flex;
   align-items: center;
   padding: 10px 0;
   color: #7b7b7b;
   padding-left: 15px;
}

.mobile-menu-main>ul>li ul li a span.icon {
   color: #d6d6d6
}

.blackout {
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, .1);
   position: fixed;
   inset: 0;
   z-index: 0;
   opacity: 0;
   scale: 0;
}

.blackout.active {
   opacity: 1;
   scale: 1
}

.whiteoutfull {
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, .8);
   position: fixed;
   inset: 0;
   z-index: 5;
   opacity: 0;
   scale: 0;
}

.whiteoutfull.active {
   opacity: 1;
   scale: 1
}

.transparentoutfull {
   width: 100%;
   height: 100%;
   background: transparent !important;
   position: fixed;
   inset: 0;
   z-index: 11;
   opacity: 0;
   scale: 0;
}

.transparentoutfull.active {
   opacity: 1;
   scale: 1
}

.table-badge {
   user-select: none;
   font-size: 12px;
   font-weight: 500;
   border-radius: 8px;
   padding: 2px 10px;
   display: inline-flex;
   align-items: center;
   gap: .2rem
}

.table-badge span.icon {
   font-size: 15px;
}

.table-badge.orange {
   background: #e8a72b;
   color: white;
}

.table-badge.green {
   background: #5ee060;
   color: white;
}

.table-badge.red {
   background: #ff5959;
   color: white;
}

.color-schema {
   margin: 10px;
   box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
   border-radius: 10px;
   height: 15px;
   width: 50px;
   overflow: hidden
}

.color-schema .one-color {
   height: 30px;
   margin-top: -7px;
   float: left;
   transform: rotate(10deg)
}

.clearfix {
   clear: both !important
}

.remove-button {
   color: white;
   align-items: center;
   display: flex;
   width: 30px;
   height: 30px;
   background: #e42c2c;
   justify-content: center;
   border-radius: 8px
}

.copy-button {
   color: white;
   align-items: center;
   display: flex;
   width: 30px;
   height: 30px;
   background: #5f6fe9;
   justify-content: center;
   border-radius: 8px
}

.barcode-button {
   color: white;
   align-items: center;
   display: flex;
   width: 30px;
   height: 30px;
   background: #6d6d6d;
   justify-content: center;
   border-radius: 8px
}

.remove-button span.icon,
.copy-button span.icon,
.barcode-button span.icon {
   font-size: 17px
}

.notif-main {
   position: fixed;
   bottom: 10px;
   right: 10px;
   display: none;
   align-items: center;
   gap: 1rem;
   max-width: 300px;
   flex: 12;
   opacity: .95;
   user-select: none;
   cursor: pointer;
   border-radius: 15px;
   padding: 12px;
   z-index: 10
}

.notif-main.success {
   background-color: #3bc664;
}

.notif-main.warning {
   background-color: #f1b21f;
}

.notif-main.error {
   background-color: #f3725d;
}

.notif-main.info {
   background-color: #468eff;
}

.notif-main .notif-icon {
   flex: 2;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, .2);
   border-radius: 10px
}

.notif-main .notif-icon span.icon {
   color: white;
   font-size: 25px;
   animation: notifIcon 1s ease-in-out infinite;
   scale: 0;
}

.notif-content {
   display: flex;
   flex-direction: column;
   flex: 10
}

.notif-content .notif-title {
   font-weight: 600;
   color: White;
   font-size: 17px
}

.notif-content .notif-text {
   font-weight: 400;
   color: White;
}

.passive-tr {
   opacity: .5
}

.login-main {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   width: 100%;
}

.login-box .login-logo {
   display: flex;
   align-items: center;
   justify-content: center
}

.login-box .login-white h3 {
   text-align: center;
}

.main-list-item {
   background-color: white;
   box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
   padding: 20px;
   border-radius: 20px
}

.main-list-item .list-item-title {
   font-size: 18px;
   color: #666;
   font-weight: 500;
}

.main-list-item .list-item-title-custom {
   font-size: 18px;
   color: #666;
   font-weight: 500;
   display: flex;
   align-items: center;
}

.main-list-item .list-item-main-content .item {
   position: relative;
}

.list-item-main-content .item a {
   transition: all .2s;
   border-radius: 10px;
   padding: 20px;
   background-color: #eff0f8;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: .5rem
}

.list-item-main-content .item .okbtn {
   position: absolute;
   top: 5px;
   right: 5px;
   font-size: 30px;
}

.list-item-main-content .item .okbtn.now {
   color: #e8a72b;
}

.list-item-main-content .item .okbtn.not {
   color: #e42c2c;
}

.list-item-main-content .item .okbtn.ready {
   color: #3bc664;
}

.list-item-main-content .item .item-icon span.icon {
   font-size: 35px;
   color: #484e7e;
}

.list-item-main-content .item .item-title {
   font-size: 15px;
   color: #484e7e;
}

.list-item-main-content .item a:hover {
   background: #484e7e;
}

.list-item-main-content .item a:hover .item-icon span.icon,
.list-item-main-content .item a:hover .item-title {
   color: white;
}

.search_filter_main {
   padding: 10px;
   max-height: 350px;
   overflow-y: auto;
   position: absolute;
   left: 0;
   right: 0;
   z-index: 3;
   background: white;
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;
   box-shadow: 0 3px 5px rgba(0, 0, 0, .05)
}

.search_filter_main ul li a {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   padding: 5px 10px;
   display: flex;
   color: #999;
   border-radius: 5px;
   color: #222
}

.search_filter_main ul li a span {
   border-radius: 3px;
   background: #5f6280;
   color: White;
   padding: 0px 2px
}

.search_filter_main ul li a:hover {
   background-color: #eee;
}

.list_of_photos_main,
.list_of_files_main {
   padding: 20px;
   border-radius: 15px;
   background: #f7f7f7;
}

.list_of_photos_main h5,
.list_of_files_main h5 {
   margin-bottom: 20px
}

.list_of_photos_main img,
.list_of_files_main img {
   box-shadow: 0 3px 5px 2px rgba(0, 0, 0, .1);
   background: white;
}

.list_of_files_main img {
   padding: 5px
}

.product_photos_list ul li,
.product_files_list ul li {
   display: flex;
   align-items: center;
   justify-content: center;
}

.product_photos_list ul li a,
.product_files_list ul li a {
   user-select: none;
   font-size: 12px;
   color: white;
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
   padding: 5px;
   border-radius: 10px;
}

.product_photos_list ul li a span.icon,
.product_files_list ul li a span.icon {
   font-size: 15px;
}

.product_photos_list ul li a.remove-photo,
.product_files_list ul li a.remove-photo {
   background-color: #e42c2c;
}

.product_photos_list ul li a.move-photo,
.product_files_list ul li a.move-photo {
   background-color: #52588a;
}

.product_photos_list ul li a.move-photo.passive,
.product_files_list ul li a.move-photo.passive {
   pointer-events: none;
   background-color: #d0d2e4;
}

.area-main-coverer {
   padding: 5px;
   border-radius: 15px;
   background-color: #484e7e;
}

.area-main-coverer .area-title {
   position: relative;
   user-select: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px;
   font-size: 17px;
   font-weight: 500;
   color: White;
}

.area-main-coverer .area-title .area-name .name {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   font-size: 45px;
   line-height: 40px
}

.area-main-coverer .area-title .area-name span {
   font-size: 22px;
   font-weight: 800
}

.area-main-coverer .area-down span.icon {
   font-size: 20px
}

.area-main-coverer .area-content-table {
   border-radius: 10px;
   background-color: white;
   padding: 15px;
   display: none
}

.area-main-coverer .area-content-table.active {
   display: block;
   max-height: 330px;
   overflow: auto;
   transition: all .5s
}

.area-mini-buttons ul {
   display: flex;
   gap: .5rem
}

.pointer {
   cursor: pointer;
}

.print-area {
   position: absolute;
   left: -100%;
   top: -100%;
   border: solid 2px black
}

@media print {
   @page {
      margin: 0;
   }
}

@keyframes notifIcon {
   0% {
      scale: 1
   }

   30% {
      scale: 1.3
   }

   66% {
      scale: 0.9
   }

   100% {
      scale: 1
   }
}

.barcode {
   font-family: "Libre Barcode 39 Text";
   font-size: 40px
}

.file_name a {
   font-size: 15px;
   color: #584e4e;
   font-weight: 500;
}

.one-file {
   padding: 25px;
   border: solid 1px #eee;
   background: white
}

.modal-main {
   transition: all .3s;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   position: absolute;
   opacity: 0;
   visibility: 0;
   scale: 0;
   z-index: 10;
}

.modal-white {
   padding: 30px;
   position: relative;
   z-index: 4;
   background: white;
   border-radius: 20px;
   box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
   width: 100%;
}

.modal-dark {
   transition: all .3s;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .1);
   z-index: 9;
   opacity: 0;
   visibility: 0;
   scale: 0;
}

.modal-main.active {
   opacity: 1;
   visibility: 1;
   scale: 1;
}

.modal-dark.active {
   opacity: 1;
   visibility: 1;
   scale: 1;
}

.modal-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.modal-top .modal-title {
   display: flex;
   gap: .3rem;
   align-items: center;
}

.modal-top .modal-title h4 {
   font-size: 18px;
   font-weight: 500
}

.modal-top .close-modal a {
   display: flex;
   align-items: center;
   color: #999;
   gap: .3rem
}

.modal-top .close-modal a span.icon {
   font-size: 30px;
}

.modal-top .close-modal a span.text {
   font-size: 12px;
   font-weight: 600
}

.modal-content .reminder {
   color: #666;
   font-weight: 500;
   font-size: 15px;
   margin: 0;
   padding: 0;
}

.arial {
   font-family: "arial" !important
}

.d-none-x2 {
   display: none !important;
}

.options {
   width: 100%;
   padding: 15px 20px;
   border-radius: 10px;
   background-color: lightseagreen;
   margin-bottom: 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.options .left {
   color: white;
   font-weight: 600;
   font-size: 17px;
}

.options .right ul {
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
   flex-direction: row;
   column-gap: 10px;
}

.options .right ul li a {
   /* transition: 0.3s; */
   background-color: white;
   color: lightseagreen;
   /* font-weight: 700; */
   padding: 8px;
   border-radius: 50px;
   display: flex;
   align-content: center;
   column-gap: 10px;
   align-items: center;
   max-width: 44px;
   height: 44px;
   overflow: hidden;
   transition: max-width 2s;
   transition-timing-function: ease;
   flex-direction: row;
}

.options .right ul li a .icon {
   font-size: 28px;
}

.options .right ul li a .text {
   transition: 0.3s;
   opacity: 0;
   white-space: nowrap;
   font-size: 16px;
}

.options .right ul li a:hover,
.options .right ul li a:hover .text {
   /* transition: 0.3s; */
   /* transition-timing-function: ease; */
   opacity: 1;
   max-width: 500px;
   border-radius: 50px;
}

.options .right ul li input {
   border: 0;
   border-radius: 20px;
   height: 44px;
   width: 100%;
   padding: 20px;
}

.options .right ul li input:focus-visible {
   outline: 1px solid #27ae60;
}

.atn {
   position: relative;
   width: 100%;
   padding: 20px;
   border: 1px solid lightgray;
   border-radius: 20px;
}

.atn .atn-title {
   font-size: 15px;
}

.atn .atn-amout {
   font-size: 28px;
   font-weight: 600;
}

.atn .atn-icon {
   position: absolute;
   top: 0px;
   right: 0px;
   color: #fff;
}

.atn .atn-icon .material-symbols-rounded {
   font-size: 100px;
   opacity: 0.5;
}

.atn.green {
   background-color: #44bd32;
}

.atn.green .atn-title {
   color: #fff;
}

.atn.red {
   background-color: #c23616;
}

.atn.red .atn-title {
   color: #fff;
}

.atn.orange {
   background-color: #f0932b;
}

.atn.orange .atn-title {
   color: #fff;
}

.atn.dark {
   background-color: #2d3436;
}

.atn.dark .atn-title {
   color: #fff;
}

.atn .atn-amout {
   color: #fff;
}

/* .hidden {
   display: none;
} */