/* .modal-* (bootstrap) *******************************/

.modal {

  .modal-dialog {

    .modal-content {
      border-radius: 10px;
      overflow: hidden;

      .modal-header {
        border: 0;
        padding: 20px;

        h2 {
          align-items: center;
          display: flex;
          font-size: 1.5rem;
          gap: 10px;

          img {
            height: 40px;
            width: auto;
          }
        }
      }

      .modal-body {
        padding: 0 20px;
      }

      .modal-footer {
        border: 0;
        padding: 20px;
        padding-top: 0;
      }
    }

    &.modal-fullscreen {

      .modal-content {
        border-radius: 0;
      }
    }
  }
}

.modal-backdrop {
	opacity: 0.6 !important;
}

/* .modal-loading *******************************/

.modal-loading {
	background-color: #fff;
	border-radius: 15px;
	display: none;
	padding: 40px 0px;
	text-align: center;
	width: 100%;

	.message {
		font-size: 0.9rem;
		font-weight: 300;

		h3 {
			font-size: 1.2rem;
			font-weight: 800;
			margin-bottom: 10px;
		}
	}

	img {
		height: 60px;
		width: auto;
	}

	.dots {
		align-items: center;
		gap: 10px;
		justify-content: center;
		width: 100%;

		.dot {
			animation: loading 1s linear forwards;
			animation-iteration-count: infinite;
			background-color: #ccc;
			border-radius: 20px;
			height: 20px;
			position: relative;
			width: 20px;
		}

		.dot2 {
			animation-delay: 250ms;
		}

		.dot3 {
			animation-delay: 500ms;
		}
	}
}

@keyframes loading {
	0% { top: 0; }
	25% { top: -5px; background-color: #999; }
	50% { top: 0; background-color: #666; }
	75% { top: 5px; background-color: #999; }
	100% { top: 0; background-color: #ccc; }
}

/* .modal-share *******************************/

.modal-share {
	background-color: #fff;
	position: relative;

	.socials {
		align-items: center;
		display: flex;
		gap: 10px;
		margin-bottom: 30px;

		a {
			align-items: center;
			background-color: #2E8BC0;
			border-radius: 25px;
			display: flex;
			height: 40px;
			justify-content: center;
			transition: all 0.2s ease;
			width: 40px;

			&:hover {
				background-color: #000;
			}
		}

		img {
			height: 20px;
			width: auto;
		}
	}
}

@media (min-width: 1000px) {

	.modal-share {

		.socials {
			gap: 10px;
			justify-content: center;

			a {
				height: 50px;
				width: 50px;
			}

			img {
				height: 25px;
			}
		}
	}
}