@import "../../../../Base/Content/sass/compass";
@import "../../../../Base/Content/sass/bootstrap/variables";
@import "Variables";


.modal-dialog {
	/* webforms custom size */
	.webform-modal-window & {
		width: 95%;
	}

	.modal-content {
		border-radius: 0;
		font-size: 14px;

		.modal-header {
			background-color: $wizdom-primary-color;
			padding: 20px 40px;
			border: 0;
			border-radius: 0;
			position: relative;

			.modal-title {
				color: #ffffff;
				font-size: 26px;
				font-weight: lighter;
				text-align: left;
				text-transform: none;
				margin: 10px 0 15px;
			}

			.close {
				color: #fff;
				text-shadow: none;
				opacity: 1;
				margin-top: 4px;
				margin-right: 6px;
				font-size: 28px;
				position: absolute;
				right: 10px;
				top: 5px;
				font-weight: 100;
			}

			.ms-Icon--Cancel {
				position: absolute;
				right: 10px;
				top: 10px;
				font-weight: normal;
				cursor: pointer;

				&:hover {
					opacity: 0.7;
				}
			}
		}

		.wt-navRowContainer {
			background-color: #f8f8f8;
		}

		.modal-body {
			padding: 15px 40px;
			margin-top: 10px;
			margin-bottom: 10px;
			min-height: 200px;

			.container-fluid {
				margin: 0;
				padding: 0;
			}

			.list-group {
				margin-bottom: 0;
			}

			.wt-fieldInfo {
				color: $wizdom-editwebpart-helptext-color;
				font-size: $wizdom-editwebpart-helptext-size;
			}

			.form-control {
				border-radius: 0;
				background-color: #fff;
				color: #808080;

				&[disabled] {
					background-color: #eee;
				}

				& + .wt-fieldInfo {
					padding-top: 6px;
				}
			}

			.form-group {

				p {
					margin: 0;
				}

				label {
					margin-bottom: 6px;
					font-weight: normal;
					color: #666;
				}

				.radio, .checkbox {
					.wt-fieldInfo {
						padding-bottom: 10px;
						padding-left: 20px;
					}

					&:last-child {
						margin-bottom: 0;

						label {
							margin-bottom: 0;
						}

						.wt-fieldInfo {
							margin-top: 6px;
							padding-bottom: 0;
						}
					}
				}

				.form-group-inner {
					margin-bottom: 10px;

					& + .checkbox {
						margin-top: -5px;
					}
				}
			}

			.input-group {
				.input-group-addon {
					border-radius: 0;
				}
			}

			div[wizdom365-taxonomypicker] {
				.input-group {
					&.filter-group a {
						margin-right: 10px;
						margin-bottom: 10px;
					}

					/*&.filter-group a:first-child {
						margin-bottom: 10px;
						margin-left: 0;
					}*/
				}
			}

			.nav-tabs {
				border-bottom: none;
				margin-bottom: 25px;
				margin-left: -15px;
				margin-right: -15px;

				li {
					margin-bottom: 0;
					padding: 0 15px 10px;

					a {
						padding: 0 0 4px 0;
						color: #666;
						border: none;
						border-bottom: 2px solid transparent;

						&:hover, &:focus, &:active {
							background: none;
						}
					}

					&.active {
						border-bottom: none;

						a {
							border-bottom: 2px solid $wizdom-primary-color;
							color: #333;
							font-weight: 600;
						}
					}
				}
			}

			.advancedSettingsExpanderText {
				padding-bottom: 5px;
				color: $wizdom-primary-color;
			}

			.advancedSettingsExpanderArrow {
				padding-left: 5px;
				color: $wizdom-primary-color;

				.glyphicon {
					color: $wizdom-primary-color;
				}

				.glyphicon-menu-up {
					top: 3px;
				}
			}

			#advancedSettings {
				margin-top: 10px;
			}
		}

		.modal-footer {
			padding: 20px 40px;
		}
	}

	.wt-paddingTopSmall {
		padding-top: 6px;
	}

	.radio, .checkbox {
		margin-top: 0;
	}

	select::-ms-expand {
		width: 16px;
		border: none;
		background-color: transparent;
	}
	/* Advanced web properties (using tabs) */
	.wt-navRowContainer {
		.navbar {
			border: 0;
			border-radius: 0;
		}

		.navbar-nav {
			float: none;
		}

		.navbar-nav > li {
			float: none;
			border-bottom: 1px solid #e5e5e5;
			border-right: 1px solid #e5e5e5;
			/*min-height: 57px;*/
			background-color: #f8f8f8;
			width: 100%;
			position: relative;
			left: 1px;
		}

		.navbar-nav > li.active {
			margin-right: -1px;
			border-right: 1px solid white;
			background-color: white;
		}

		.navbar-nav > li a,
		.navbar-nav > li a:focus,
		.navbar-nav > li a:hover {
			padding: 15px;
			color: #333333;
			font-weight: bold;
		}

		.navbar-nav a {
			background-color: #f8f8f8 !important;
		}

		.navbar-nav a:hover {
			background-color: white !important;
		}

		.navbar-nav > a,
		.navbar-nav > a:hover,
		.navbar-nav > a:focus {
			background-color: white;
		}

		.navbar-nav > .active > a,
		.navbar-nav > .active > a:hover,
		.navbar-nav > .active > a:focus {
			background-color: #ffffff !important;
		}

		.navbar-nav > li a:focus {
			outline: 0;
		}
	}

	.wt-navRow {
		background-color: #f5f5f5;
	}

	.wt-navMenuColumn {
		padding: 0;
		z-index: 2;
		margin-right: 1px;
	}

	.wt-navContentColumn {
		background-color: #ffffff;
		padding-left: 0;
		padding-right: 0;
		border-left: 1px solid #e5e5e5;
		margin-left: -1px;
		z-index: 1;
	}
	/* Following styles remove the inner shadow on inputfields. Not sure if we want shadows or not. In the Photoshop design there are no shadows */
	input.ng-valid, input.ng-invalid {
		box-shadow: inset 0 0 0 0 rgba(0,0,0,0.075) !important;
	}
}

.modal:not(.webform-modal-window) {
    .modal-dialog {
        .formly-field {
            .radio, .checkbox {
                & + .radio, & + .checkbox {
                    margin-top: -5px;
                }

                &:last-child {
                    margin-bottom: 0;

                    label {
                        margin-bottom: 0;
                    }
                }
            }
        }

        .form-group {
            margin-bottom: 35px;
        }
    }
}

.wt-editmode {

    .ms-SPZone > .s4-wpcell,
    .ms-SPZone > .s4-wpcell-plain,
    .ms-rte-wpbox > div > .s4-wpcell,
    .ms-rte-wpbox > div > .s4-wpcell-plain {
        border: 1px dashed #C6C6C6;
        padding: 8px;
    }

    .ms-SPZone > .s4-wpActive,
    .ms-rte-wpbox > div > .s4-wpActive {
        border: 1px dashed #C6C6C6;
        padding: 8px;
    }

    .ms-SPZone.ms-webpart-zone {
        border-color: #C8C8C8;
    }

    .webpart-edit-button-container {
        margin-top: -10px;
        margin-right: -10px;
        text-align: right;

        .editWebpartButton {
            color: #3C3C3C;
            font-size: 14px;
            padding: 0 12px 2px;
            background-color: transparent;
            border-radius: 0 !important;

            &:hover {
                background-color: transparent;
                color: #656564;
            }

            &:active {
                background-color: transparent;
                -webkit-box-shadow: none;
                box-shadow: none;
            }

            &:focus {
                outline-color: transparent;
            }
        }

        .ms-Icon--Edit {
            padding-right: 4px;
            top: 2px;
        }
    }

    .icon-small {
        font-size: 10px;
    }

    .editPanelTopAlignment {
        top: 2px;
    }

    .wt-controlpanel-item-title {
        .ms-Icon {
            padding-right: 4px;
        }
    }
}
