// Bootstrap styles overload
*, *::before, *::after {
	box-sizing: border-box;
}

input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs__"]), optgroup, textarea, pre {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

.octopus-app{
	button {
		cursor: pointer;

		&:disabled, &[aria-disabled="true"]{
			cursor: default !important;
		}
	}

	h1,.h1{
		font-size: var(--octopus-h1-font-size);
		text-align: center;
		color: var(--octopus-h1-color-fg);
		margin-bottom: 1rem;

		@media (width <= 500px){
			font-size: var(--octopus-h1-font-size-mobile);
			margin: 0.5rem 0 1rem;
		}
	}

	h2,.h2{
		color: var(--octopus-h2-color-fg);
		font-size: var(--octopus-h2-font-size);

		@media (width <= 500px) {
			font-size: var(--octopus-h2-font-size-mobile);
		}
	}

	h3,.h3{
		font-size: 1.05rem;
	}

	h4,.h4{
		font-size: 1rem;
	}

	h5,.h5{
		font-size: .80rem;
	}

	h6,.h6{
		font-size: .60rem;
		display: flex;
    	align-items: center;
		font-weight: normal;
	}


	h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
		&:not(.text-uppercase){
			letter-spacing: -0.03em;
		}

		margin-top: 0;
		margin-bottom:0;
		font-weight: 600;
		line-height: 1.2;
	}

	
	.text-truncate{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.btn{
		display: inline-block;
		padding: 0.4rem;
		line-height: 1.5;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		user-select: none;
		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
		font-size:.7rem;
		border-radius: var(--octopus-border-radius);
		color: var(--octopus-btn-secondary-fg);
		background: var(--octopus-btn-secondary-bg);
		text-decoration: none !important;
		white-space: nowrap;
		border-width: 0;

		@media (width <= 960px) {
			white-space: normal;
		}


		&:is(:hover, :focus, :active, .active) {
			box-shadow: none;
		}

		&:hover{
			background: var(--octopus-primary-more-transparent);
		}

		&:not(.btn-underline, .btn-primary, .btn-on-dark, .btn-transparent, .admin-button, .share-btn){
			&:disabled, &[aria-disabled="true"] {
	      		cursor: default;
				background-color: var(--octopus-secondary-lighter) !important;
				color:  var(--octopus-text-disabled) !important;
			}
		}

		&.btn-underline{
			background: none;
			padding: 0;
			margin: 0.5rem 2rem 1rem 0;
			border-radius: 0;
			font-size: 0.9rem;
			position: relative;

			@media (width <= 960px) {
				margin: 0 0.4rem 0.7rem 0;
				font-size: 0.7rem;
			}

			&::after {    
				bottom: 0;
				content: "";
				display: block;
				height: 2px;
				left: 50%;
				position: absolute;
				background: var(--octopus-primary);
				transition: width 0.3s ease 0s, left 0.3s ease 0s;
				width: 0;
			}

			&:is(:hover, .active)::after{ 
				width: 100%; 
				left: 0; 
			}
		}

		&.btn-min-width{
			min-width: 24px;
		}
		
		&.btn-primary {
			display: flex;
			align-items: center;
			justify-content: center;
			background: var(--octopus-btn-primary-bg);
			border: 1px solid var(--octopus-btn-primary-bg);
			border-radius: var(--octopus-border-radius) !important;
			color: var(--octopus-btn-primary-fg) !important;
			font-weight: 500;

			&:not(.btn-on-dark):is(:focus, :hover, :active, .active){
				background: transparent;
				color: var(--octopus-primary) !important;
			}

			&.btn-on-dark:is(:focus, :hover, :active, .active){
				background: transparent;
				border-color: var(--octopus-color-on-primary) !important;
			}

			&:not(.btn-on-dark):disabled, &:not(.btn-on-dark)[aria-disabled="true"],
			&.btn-on-dark:disabled, &.btn-on-dark[aria-disabled="true"] {
				background-color: var(--octopus-secondary-darker);
				border: 1px solid black;
				cursor: default;
				color: var(--octopus-text-disabled) !important;
			}

			@media (width <= 500px){
				margin: 0.3rem;
			}
		}

		&.btn-small {
			font-size: 0.55rem;
			padding: 0.2rem 0.4rem;
		}
		
		&.admin-button{
			padding: 0.3rem;
			height: 2.2rem !important;
			width: 2.2rem !important;
			font-size: 1.1rem;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			color : var(--octopus-primary);
			flex-shrink: 0;
			font-weight: 500;
			border-radius: 50% !important;
		}
		
	}

	// Make disabled state visible
	.btn:disabled, .btn:disabled:hover, .btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover {
		filter: grayscale(100%);
		opacity: 60%;

		&:not(.btn-transparent) {
			background-color: var(--octopus-secondary);
		}
	}


	.btn-transparent{
		background: transparent;
		border: 0;
	}

	.btn-icon {
		background: transparent;
		border: 0;
		border-radius: 100%;
		height: fit-content;
	}

	.share-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 1rem;
		width: 2.5rem !important;
		height: 2.5rem !important;
		padding: 0.5rem;
		color : var(--octopus-btn-social-fg);
		background-color : var(--octopus-btn-social-bg);
		flex-shrink: 0;
		border-radius: 50% !important;

		@media (width <= 960px) {
			font-size: 1rem;
			width: 2.2rem !important;
			height: 2.2rem !important;
      	}
	}

	.btn-round-light {
		font-size: 1.2rem;
		width: 2.2rem;
  		height: 2.2rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		border-radius: 50% !important;
		background: transparent;

		&:hover {
			background: var(--octopus-secondary);
		}
	}

	.w-50-responsive{
		display: flex;
		align-items: center;
		flex-grow: 1;
		width: 50%;

		@media (width <= 960px) {
		width:100%;
				padding: 0 !important;
		}
	}
}