﻿/* Default styles */
@media (max-width: 601px) {
	/* Styles for small screens */

	/*Personal code*/
	.custom-code-page {
		width: 100vw;
	}
	.custom-code-page-input-area {
		width: 100% !important;
		padding: 24px !important;
	}

	.custom-code-page-title {
		font-size: 18px !important;
	}

	.custom-code-page-description {
		font-size: 14px !important;
	}

	.oig-wrapper-content:has(.oig-otp-input-container) {
		width: 100%;
	}

	.oig-otp-input-container {
		gap: 6px;
		width: 100%;
	}

	.oig-otp-input {
		max-width: calc(100% / 9 - 8px);
		min-height: 44px !important;
	}

	.oig-otp-input .oig-message {
		font-size: 18px;
	}

	.oig-wrapper-content:has(.oig-otp-input-container) .oig-error-message {
		font-size: 12px;
		font-weight: 400;
	}

	.custom-code-page-info-bar {
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: column;
		padding: 24px 16px;
		gap: 16px;
		border-top: 1px solid var(--grey-300-color);
	}

	.custom-code-page-info-bar .info-bar-row {
		/*gap: 8px;*/
	}

	.custom-code-page-info-bar .info-bar-row * {
		font-size: 12px;
		padding: 0 8px;
		border-right: 1px solid var(--grey-300-color);
	}

	.custom-code-page-info-bar .info-bar-row:not(:first-of-type) * {
		border-right: 1px solid var(--grey-300-color);
	}

	.custom-code-page-info-bar info-bar-row:first-of-type {
		font-weight: 600;
	}

	/*SurveyLayout*/
	.oig-basic-blob-image-container {
		height: unset !important;
		max-width: 100%;
	}

	.oig-survey-toolbar .oig-survey-header-logo img {
		max-width: 48px;
	}

	.oig-survey-toolbar .oig-close-button {
		margin-bottom: unset;
	}

	.oig-survey-body {
		padding: 0;
	}

	.oig-survey-body .oig-survey-toolbar {
		padding: 12px 16px;
	}

	.oig-survey-body .oig-survey-toolbar .oig-survey-header-text * {
		font-size: 12px;
	}

	.oig-survey-body .oig-module-content {
		margin: 0;
		border: 0;
		border-radius: 0;
	}

	.oig-survey-body .oig-center-content-block {
		height: calc(100% - 75px);
	}

	.oig-survey-body .oig-center-content-block > div {
		min-width: 0;
	}

	.oig-survey-body .oig-center-content-block .oig-general-survey-page-layout,
	.oig-survey-body .oig-center-content-block .oig-block-list {
		max-width: 100%;
		justify-content: unset;
		padding: 40px 48px;
	}

	.oig-survey-body .oig-survey-page-controls {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		background-color: white;
		justify-content: center;
		display: flex;
		padding: 12px;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.oig-survey-body .oig-center-content-block .oig-general-survey-page-layout .oig-survey-page-controls {
		flex-direction: column;
		align-items: center;
	}

	.oig-survey-body .oig-general-survey-page-layout .oig-survey-page-controls .oig-button {
		width: 100% !important;
	}

	.oig-survey-body .oig-center-content-block .oig-block-list {
		flex: unset;
		margin: auto;
	}

	.oig-survey-body .oig-survey-page-controls .oig-button.action {
		flex: 1;
	}

	.oig-center-content-block,
	.oig-general-survey-page-layout,
	.oig-block-list {
		min-width: unset !important;
	}

	.oig-block-list {
		padding: 0;
	}

	.oig-progressbar-container {
		padding: 0;
		height: 0;
		position: fixed;
		bottom: 80px;
		width: calc(100% + 20px);
	}

	.oig-radio-button label::after {
		top: 6px;
		left: 6px;
		height: 8px;
		width: 8px;
	}

	.oig-survey-page-title {
		font-weight: 600;
		font-size: 18px;
		line-height: 24px;
	}

	.oig-survey-page-description {
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
	}
	.oig-survey-body .oig-module-content .oig-label-wrapper .oig-label,
	.oig-survey-body .oig-module-content .oig-label-wrapper .oig-label * {
		font-weight: 600;
		font-size: 18px;
		line-height: 24px;
	}

	.oig-survey-body .oig-module-content .oig-label-wrapper .oig-description,
	.oig-survey-body .oig-module-content .oig-label-wrapper .oig-description * {
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
	}

	.item-block .oig-radio-label,
	.item-block .oig-radio-label * {
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
	}

	.oig-mobile-answer-matrix {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.oig-mobile-answer-matrix-row:not(:first-of-type) {
		padding-top: 24px;
		border-top: 1px solid var(--grey-300-color);
	}

	.oig-mobile-answer-matrix .oig-label,
	.oig-mobile-answer-matrix .oig-label *:not() {
		font-weight: 600 !important;
		font-size: 12px !important;
		line-height: 16px !important;
		color: var(--grey-800-color) !important;
	}

	.oig-mobile-answer-matrix .oig-mobile-answer-matrix-row .oig-label-wrapper {
		gap: 24px;
	}

	.oig-mobile-answer-matrix-numeric-input {
		display: flex;
		width: 100%;
		padding: 16px;
		background-color: white;
		gap: 8px;
		border-radius: 10px;
	}

	.oig-mobile-answer-matrix-numeric-input * {
		margin: 0;
	}

	.oig-survey-body .oig-mobile-answer-matrix .oig-mobile-answer-matrix-numeric-input-label {
		flex: 1;
		border-right: 1px solid var(--grey-300-color);
	}

	.oig-survey-body .oig-mobile-answer-matrix .oig-mobile-answer-matrix-numeric-input-value {
		align-items: center;
		display: flex;
		gap: 8px;
	}

	.oig-survey-body .oig-mobile-answer-matrix .oig-mobile-answer-matrix-numeric-input-label *,
	.oig-survey-body .oig-mobile-answer-matrix .oig-mobile-answer-matrix-numeric-input-value *{
		font-size: 14px;
		line-height: 18px;
		font-weight: 400;
		color: var(--grey-800-color);
	}

	.oig-survey-body .oig-mobile-answer-matrix .oig-mobile-answer-matrix-numeric-input-value .oig-button {
		height: 24px;
		width: 24px;
		padding: 4px;
		border-radius: 4px;
	}


	.item-block-content .mobile-view-question-wrapper {
		display: flex;
		flex-direction: column;
		gap: 12px;
		flex: 1;
	}

	.item-block-content .mobile-view-question-wrapper .oig-radio-label > * {
		display: inline !important;
	}

	.item-block-content .mobile-view-question-wrapper .oig-radio-label > .oig-checkbox {
		margin-right: 8px;
	}

	.item-block-content .mobile-view-question-wrapper .oig-radio-label > div:has(> label) label {
		display: inline-block;
	}

	.oig-survey-body .oig-radio-label + .oig-label-wrapper {
		min-width: auto;
	}
}

@media (min-width: 602px) (max-width: 992px) {
	/* Styles for medium screens */
}

@media (min-width: 993px) {
	/* Styles for large screens */
}
