// main: ../options.scss

@media screen and (max-width:900px) {

	.mts-opts-sidebar {
        width: 64px;
    }

    .mts-opts-main {
        margin-left: 64px;
    }

    .mts-opts-group-menu {
		li {
			a {
	            height: 16px;
	            padding: 20px 10px 20px 14px;

				i {
		            position: relative;
		            left: -2px;

		            float: none;
		        }
	        }

			&.active a,
	        a:hover {
	            width: 40px;
	            margin-right: 0;
	            padding: 20px 10px 20px 14px;
	        }
		}
    }
}

@media screen and (max-width:782px) {

	.mts-opts-form-wrapper {

		select[multiple] {
	        height: 128px;
	    }

	    select {
	        padding-top: 5px;
	    }

		.field_title {
	        font-size: 22px;
	    }

		.description {
	        font-size: 16px;
	        line-height: 1.4em;
	    }
	}

	.mts-opts-header,
    .mts-opts-footer {
        padding: 10px 20px;
    }

	.mts-opts-group-tab {
		.form-table tr th {
	        width: 100%;
	        padding-bottom: 0 !important;
	    }

		.form-table tr th,
	    .form-table tr td {
	        padding: 20px;
	    }

		.mts-opts-section-desc,
	    h3 {
	        padding: 0 20px;
	    }
	    > h3 {
	        font-size: 26px !important;
	    }
	}

    input.popup-colorpicker {
        width: 86px !important;
    }

    .ui-button .ui-button-text {
        font-size: 17px !important;
        line-height: 36px !important;

        height: 36px !important;
        padding: 0 20px !important;
    }

	.headtext {
        display: none;
    }

	.ui-buttonset,
    .mts-opts-upload.button-secondary {
        float: none;
    }
}

@media screen and (max-width:600px) {

	.ui-buttonset {
		.ui-button {
	        width: 100%;

	        border: 1px solid #b6b6b6 !important;
	        border-radius: 3px;

			&.ui-state-default.ui-corner-right .ui-button-text {
		        border-right: none !important;
		    }
		    &.ui-state-default.ui-corner-left {
		        border-left: 1px solid #b6b6b6 !important;
		    }
	    }
	}

	.mts-opts-main {
		.wp-picker-container {
	        width: 100%;
	    }
	    .wp-color-result {
	        display: block;

	        width: auto;
	        height: 32px;
	        padding-left: 48%;
			&:after {
		        line-height: 32px;
		    }
	    }

		.button-primary,
	    .button-secondary {
	        float: none;

	        width: 100%;

	        text-align: center;
	    }
	    .mts-opts-upload {
	        font-size: 1em;
	        line-height: 34px;

	        height: 36px;
	    }
	}
}
