.photo-input
{
	width:150px;
	height:150px;
	border:1px solid #ced4da;
	border-radius:5px;
	cursor:pointer;
	padding:10px;
	display: flex;
	justify-content:center;
	align-items:center;
	img
	{
		max-width: 100%;
	}
	&:hover
	{
		background: #f1f1f1;
	}
}

table[web-func-type=lists]
{
	tbody
	{
		input[type=text],input[type=email],input[type=number],input[type=date],select
		{
			min-width:150px;
		}
		textarea{
			min-width:200px;
		}
		.func-radio
		{
			list-style:none;
			padding:0px;
			margin:0px;
		}
		.photo-input
		{
			width: 100px;
			height: 100px;
			overflow: hidden;
		}
	}
}
#image-modal
{
  .msg
  {
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:10000;
    background:rgba(0,0,0,.5);
    color:#fff;
    
    justify-content:center;
    align-items:center;
    
  }
  &.on-drop
  {
    .msg{
      display: flex;
    }  
  }
  .modal-dialog
  {
    margin:1vw;
    min-width:98vw;
    height:98vh;
    .modal-content
    {
      .modal-body
      {
        .image-tag
        {
          list-style: none;
          padding: 0;
          margin:0px;
          display: flex;
          li
          {
            a
            {
              display: block;
              padding:5px 10px;
              background-color: #f1f1f1;
              border-radius: 5px 5px 0 0;
              color:#007bff;
            }
            &.active
            {
              a
              {
                background-color: #007bff;
                color:#fff;
              }
            }
          }
        }
        .image-tag-body
        {
          padding-top:16px;
          display: none;
          &.active
          {
            display: block;
            @media(min-width:769px)
            {
                display: flex;
            }
          }
          &#image-files
          {
            @media(min-width:769px)
            {
              .image-left
              {
                width: 20vw;
              }
              .image-right
              {
                flex:1;
                padding-left:16px;
              }
            }
            @media(max-width:768px)
            {
              .image-left
              {
                .image-folder
                {
                  display: none;
                }
              }
            }
            .image-left
            {
              .input-group
              {
                margin-bottom:16px;
              }
              
              .image-folder
              {
                background-color: #f1f1f1;
                padding:16px;
                border-radius: 5px;
                >ul
                {
                  list-style-type: none;
                  padding:0px;
                  margin:0px;
                  a
                  {
                    display: block;
                    padding:5px;
                    border-radius: 5px;
                  }
                  li.active
                  {
                    >a
                    {
                      background-color: #007bff;
                      color:#fff;
                    }
                  }
                  ul
                  {
                    list-style-type: none;
                    padding:0px;
                    margin:0px;
                  }
                }
              }
            }
            .image-right
            {
              .breadcrumb
              {
                padding:5px 10px;
                margin-bottom:16px;
              }
              .image-tool
              {
                text-align: right;
                margin-bottom:16px;
              }
              .image-files
              {
                list-style-type: none;
                padding:0px;
                margin:0px;
                display: flex;
                flex-wrap:wrap;
                li
                {
                  position: relative;
                  margin:0 8px 16px 8px;
                  a
                  {
                    transition-duration:0.5s;
                    display: block;
                    border:1px solid #f1f1f1;
                    border-radius: 5px;
                    padding:5px;
                    picture
                    {
                      position: relative;
                      display: block;
                      overflow: hidden;
                      &::after
                      {
                        padding-top:97%;
                        content: ' ';
                        display: block;
                        width: 100%;
                      }
                      img
                      {
                        position: absolute;
                        top:50%;
                        left:50%;
                        display: block;
                        max-width: 100%;
                        max-height:100%;
                        transform: translate(-50%, -50%);
                      }                    
                    }
                    .folder-icon
                    {
                      position: relative;
                      display: block;
                      overflow: hidden;
                      &::after
                      {
                        padding-top:97%;
                        content: ' ';
                        display: block;
                        width: 100%;
                      }
                      i
                      {
                        position: absolute;
                        top:50%;
                        left:50%;
                        display: block;
                        transform: translate(-50%, -50%);
                        font-size:10em;
                      }
                    }
                    span
                    {
                      background-color: rgba(0,0,0,.5);
                      color:#fff;
                      display: block;
                      width: calc(100% - 10px);
                      padding:5px;
                      position: absolute;
                      left:5px;
                      bottom:5px;
                      border-radius: 5px;
                    }
                    &:hover
                    {
                      background-color: #333;
                    }
                  }
                  button
                  {
                    position: absolute;
                    top:10px;
                    right:10px;
                    display: none;
                  }
                  @media(min-width:769px)
                  {
                    width: calc((100% - 48px) / 4);
                    &:nth-child(4n)
                    {
                      margin-right: 0px;
                    }
                    &:nth-child(4n + 1)
                    {
                      margin-left: 0px;
                    }
                  }
                  @media(max-width:768px)
                  {
                    width: calc((100% - 16px) / 2);
                    &:nth-child(2n)
                    {
                      margin-right: 0px;
                    }
                    &:nth-child(2n + 1)
                    {
                      margin-left: 0px;
                    }
                  }
                }
                &.delete
                {
                  li
                  {
                    button
                    {
                      display: block;
                    }
                  }
                }
              }
            }
          }
          &#image-config
          {
            #image-setting
            {
              margin-bottom:16px;
            }
            @media(min-width:769px)
            {
              #image-setting
              {
                width:20%;
                padding-right:16px;
              }
              #main-image
              {
                flex:1;
              }
            }
            #main-image
            {
              margin-bottom:16px;
              padding:10px;
              border:1px solid #f1f1f1;
              border-radius: 5px;
              picture
              {
                display: block;
                
                min-width:300px;
                margin:0 auto 0 auto;
                img
                {
                  display: block;
                  max-width:100%;
                  margin:auto;
                }
              }

            }
          }
        }
      }
    }
  }
}

.modal
{
	.shipping-list
	{
		margin:0px;
		display: flex;
		flex-wrap:wrap;
		list-style: none;
		padding:0px;
		li
		{
			width: 50%;
			padding:10px 0;
			line-height: 18px;
			input
			{
				width:18px;
				height:18px;
				margin-right:10px;
			}
		}
	}
}
.modal-body
{
	.view-list
	{
		list-style: none;
		display: flex;
		flex-wrap:wrap;
		margin:0px;
		padding:0px;
		li
		{
			width: calc(50% - 5px);
			margin:0 5px 10px 5px;
			border:1px solid #f1f1f1;
			border-radius: 5px;
			label
			{
				display: block;
				padding:10px;
				cursor: pointer;
				margin:0px;
				input
				{
					margin-right: 10px;
				}
			}
			&:nth-child(2n)
			{
				margin-right: 0px;
			}
			&:nth-child(2n + 1)
			{
				margin-left: 0px;
			}
		}
	}
	.url-tag-head
	{
		display: flex;
		list-style: none;
		padding:0px;
		margin:0px;
		li
		{
			a
			{
				display: block;
				padding:5px 10px;
				background: #f1f1f1;
				border-radius: 5px 5px 0 0;
				margin-right: 1px;
				font-size:0.9rem;
			}
			&.active
			{
				a
				{
					background: #007bff;
					color:#fff;
				}
			}
		}
	}
	.url-tag-body
	{
		>div
		{
			display: none;
			padding-top:10px;
			&.active
			{
				display: block;
				.breadcrumb
				{
					padding:5px 10px;
					font-size:0.9rem;
				}
				.table
				{
					thead
					{
						tr
						{
							th
							{
								padding:0.5rem;
								&:last-child
								{
									text-align: center;
								}
							}
						}
					}

					&.last-button
					{
						tbody
						{
							tr
							{
								td
								{
									padding:0.5rem;
									&:last-child
									{
										text-align: center;
									}
								}
							}
						}
					}
				}

			}
		}
	}
}