:root {
	--armicn-primary-color: green;
	--armicn-danger-color: rgb(255, 37, 37);
}
.armicn-text-success {
	color: var(--armicn-primary-color);
}
.armicn-text-danger {
	color: var(--armicn-danger-color);
}
i.fas,
i.far {
	font-family: "Font Awesome 5 Free";
}
i.fab,
i.far {
	font-weight: 400;
}
i {
	&.fab {
		font-family: "Font Awesome 5 Brands";
	}
}
.armicn_saved_icon_wrapper {
	display: flex;
	gap: 8px;
	.armicn_saved_icon {
    	display: contents;
	}
	i {
		font-size: 20px;
	}
	.armicn_remove_icon_toggle_in_nav_item {
		display: none;
	}
	&.has-icon {
		.armicn_remove_icon_toggle_in_nav_item {
			display: inline;
		}
	}
}
.wp-picker-container {
	&.wp-picker-active {
		background: #4444;
		padding: 10px;
		span {
			&.wp-picker-input-wrap {
				display: inline-flex !important;
				flex-direction: row;
			}
		}
	}
	.wp-color-result {
		&.button {
			margin-bottom: 0 !important;
		}
	}
}


div#armicn-modal {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	z-index: 9999;
	.armicn-overlay {
		position: fixed;
		z-index: 99;
		width: 100%;
		height: 100%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: #00000096;
	}
	.armicn-modal-closer {
		position: absolute;
		right: 20px;
		top: 10px;
		height: 35px;
		width: 35px;
		border-radius: 3px;
		background: red;
		border: none;
		color: #fff;
		cursor: pointer;
		z-index: 2;
	}
	.armicn-modal-body {
		display: block;
		margin: auto;
		width: 95%;
		z-index: 100;
		position: relative;
		border-radius: 5px 5px 5px 5px;
		background: #fff;
		.ajax-loader {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			background: rgb(255 255 255 / 67%);
			width: 100%;
			height: 100%;
			align-items: center;
			justify-content: center;
			display: none;
			img {
				width: 80px;
			}
			&.show {
				display: flex;
			}
		}
		.armicn-modal-content {
			border-radius: 5px 5px 5px 5px;
			display: flex;
			min-height: 734px;
			img {
				max-width: 100%;
			}
			select,
			input {
				height: 40px;
				border: 1px solid #d9d0d0;
				color: #000;
				appearance: none;
			}
			input {
				width: 250px;
			}
			.icon-source-wrapper {
				margin-bottom: 20px;
				display: flex;
				gap: 10px;
			}
			.col-left {
				width: 70%;
				.icon-tab-content {
					position: relative;
				}
				.armicn_icons-selection-wrapper {
					background: #ededed;
					display: flex;
					flex-wrap: wrap;
					gap: 10px;
					height: 560px;
					overflow: auto;
					max-height: 100%;
					padding: 30px;
				}
				p.warning {
					height: 50px;
					align-content: center;
					background-color: #b10000;
					color: #fff;
				}
				button {
					&.armicn-icon-button {
						height: 50px;
						width: 50px;
						border: none;
						-webkit-tap-highlight-color: rgba(0,0,0,0);
						-webkit-tap-highlight-color: transparent;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						cursor: pointer;
						background-color: #eeeeee;
						padding: 1.5em;
						border-radius: 10px;
						box-shadow: -7px -7px 20px 0px #fff9,
								-4px -4px 5px 0px #fff9,
								7px 7px 20px 0px #0002,
								4px 4px 5px 0px #0001,
								inset 0px 0px 0px 0px #fff9,
								inset 0px 0px 0px 0px #0001,
								inset 0px 0px 0px 0px #fff9,
								inset 0px 0px 0px 0px #0001;
						transition: box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
						span {
							&.icon-name {
								display: none;
							}
						}
						i {
							font-size: 20px;
							font-style: normal;
							display: block;
							color: #fff;
						}
						&:hover,
						&.active-armicn {
							background: #333;
							color: #fff;
						}
					}
					&.armicn_set_icon_dialog-closer {
						position: absolute;
						right: 7px;
						top: 6px;
						height: 30px;
						width: 30px;
						border-radius: 50%;
						border: none;
						color: red;
						cursor: pointer;
						z-index: 2;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
			.col-right {
				width: 30%;
				border-left: 1px solid #ddd;
				background: rgba(238, 238, 238, 0.9333333333);
				.armicn-option-input-list {
					li {
						display: flex;
						align-items: center;
						border-bottom: 1px solid #ededed;
						padding: 15px 0;
						margin-bottom: 0;
						column-gap: 10px;
						.option-label {
							font-weight: 600;
							font-size: 15px;
							min-width: 110px;
						}
						.option-inputs {
							display: flex;
							gap: 10px;
							flex-wrap: wrap;
							.wp-picker-container .wp-color-result.button,
							input {
								width: 115px;
								height: 35px;
								&::placeholder {
									color: #9f9f9f;
								}
							}
							.multi-inputs {
								display: flex;
								flex-wrap: wrap;
								gap: 5px;
								&.wide-inputs {
									label {
										width: 189px;
									}
								}
								&.mid-wide-inputs {
									label {
										width: 142px;
									}
								}
							}
							label {
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								row-gap: 3px;
							}
						}
					}
				}
			}
			
		}
		.inner-wrapper {
			padding: 30px 30px 20px 30px;
		}
		.action-bar {
			padding: 10px 40px 10px 40px;
			display: flex;
			justify-content: space-between;
			border-top: 1px solid #ddd;
			.armicn-save {
				font-size: 16px;
				box-shadow: 0px 0px 0px 0px #ededed;
				border-color: #d7d7d7;
				color: #ffff;
				line-height: 1;
				padding: 10px 20px;
				&:hover {
					background: #333;
					color: #fff;
				}
			}
			p {
				&.form-status {
					margin: 0;
					padding: 10px 0;
					font-weight: 800;
				}
			}
		}
	}
	
	
}


.armicn-settings-tabs {
	max-width: 99%;
	th[scope="row"] {
		display: none;
	}
	ul#tabs-nav {
		list-style: none;
		margin: 0;
		overflow: auto;
		display: flex;
		background-color: #787c82;
		li {
			float: left;
			font-weight: bold;
			margin-bottom: 0;
			cursor: pointer;
    		border-right: 1px solid #fff;
			a {
				text-decoration: none;
				color: #fff;
				padding: 15px 40px;
				display: block;
				&:focus {
					box-shadow: none;
					outline: none;
				}
			}
			&:hover,
			&.active { 
				a {
					background-color: #fff;
					color: #000;
				}
			}
		}
	}
	.tab-contents-wrapper {
		background: #fff;
		padding: 0 30px;
		.tab-content {
			&#tab_menu_welcome {
				max-width: 60%;
			}
			padding: 30px 0;
			.tab-section {
				margin-top: 40px;
			}
			.settings-item {
				margin-bottom: 20px;
				display: flex;
				align-items: center;
				label {
					min-width: 150px;
					width: 150px;
					display: inline-block;
				}
				input {
					margin-right: 10px;
				}
			}
			.armicn-features-list-wrapper {
				display: flex;
				gap: 40px;
				margin-bottom: 20px;
				.armicn-features-list {
					background: #f3f3f3;
					padding: 10px 40px;
					border-radius: 3px;
					min-width: 220px;
					li {
						font-size: 15px;
						span {
							margin-right: 3px;
							&.dashicons {
								&.dashicons-no {
									color: red;
								}
							}
						}
					}
					
				}
			}
		}
		
	}
	
	
}


// deactivation
$popup-width: 450px;
$primary-color: #3b3af4;
$hover-color: #3333cc;
$border-color: #ccc;
$background-color: #fff;
$text-color: #000;

#ar-menu-icons-deactivation-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: $popup-width;
  background: $background-color;
  border: 1px solid $border-color;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 100000;
  padding: 20px;
  font-family: Arial, sans-serif;
  color: $text-color;

  .ar-menu-icons-deactivation-popup-content {
    h3 {
      margin: 0 0 10px;
      font-size: 18px;
    }

    p {
      margin: 0 0 15px;
    }

    textarea {
      width: 100%;
      height: 60px;
      margin-top: 10px;
      border: 1px solid $border-color;
      border-radius: 4px;
      padding: 5px;
    }

    .buttons {
      margin-top: 20px;
      text-align: right;

      button {
        background: $primary-color;
        color: $background-color;
        border: none;
        border-radius: 4px;
        padding: 8px 12px;
        cursor: pointer;

        &:hover {
          background: $hover-color;
        }

        &:not(:last-child) {
          margin-right: 10px;
        }
      }
    }
  }
}

#deactivation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
}