@media only screen and (orientation:landscape) {
  body {
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg);
  }
}

body{
	/*background: url('../img/default/default.jpg');/*#2a2218;*/
    background: url('../img/default/tetris3.jpg');
	font-family:Arial;
	font-size:7.5pc;
	font-weight:bold;
	color:#fff;
	position: fixed; 
	height: 100%;
	width: 100%;
    margin: 0;
}

a {
  color: #870e0e;
  text-decoration: none;
}

.redButton {
	box-shadow: 0px 0.5pc 0px rgb(53 7 7 / 50%);
    background: linear-gradient(109deg, rgb(135 14 14 / 41%) 0%, rgb(91 8 5 / 45%) 45%, rgb(95 12 9 / 47%) 100%);
    border: 0.3pc solid #0202025e;
	display:inline-block;
	cursor:pointer;
	color:#fff;
	font-family:Arial;
  	user-select: none;
	font-size: 2.5pc;
	font-weight:bold;
	padding:2.5pc 3pc;
	text-decoration:none;
	text-shadow:0px 0.5pc 0px #692015;
}
.redButton:hover {
	background-color:#7a23237d;
}
.redButton:active {
	position:relative;
	top:0.5pc;
	box-shadow: none;
}

.cubetto {
/*	padding: 1pc;
	font-size: 2.5pc;
	border-width: 0.3pc;
	border-color: #470a0a;
	background-color: #b04d3b7d;
	color: #fff;
	border-style: solid;
  	user-select: none;
	border-radius: 0px;
	box-shadow: 0px 0.5pc 0px rgba(172,29,29,.25);
	text-shadow: 0px 0px 1pc rgba(255,255,255,.85);*/


    padding: 1pc;
    font-size: 2.5pc;
    border-width: 0.3pc;
    border-color: #470a0a;
	background: linear-gradient(109deg, rgb(135 14 14 / 41%) 0%, rgb(91 8 5 / 45%) 45%, rgb(95 12 9 / 47%) 100%);
    color: #fff;
    border-style: solid;
    user-select: none;
    border-radius: 0px;
    box-shadow: 0px 0.5pc 0px rgb(53 7 7 / 50%);
    text-shadow: 0px 0px 1pc rgb(255 255 255 / 85%);
}

.cubettoPushable:active {
	position:relative;
	top:0.5pc;
	box-shadow: none;
}

.css-input:focus {
	outline:none;
}

.css-input::placeholder {
	color: #bbb;
	text-shadow: 0px 0px 1pc rgba(255,255,255,.50);
}

#wrapper{
	width:fit-content;
	left:50%;
	text-align: center;
	margin: auto;
    height: -webkit-fill-available;
}

#divWrapperLogin{
	text-align: center;
}

#logo{
	width: 60vw;
    height: 60vw;
    max-width: 60vh;
    max-height: 60vh;
    filter: hue-rotate(92deg) brightness(60%) contrast(1.6) saturate(0.73);
}

.relationshipDiv{
    height: 6pc;
    text-align: left;
    font-size: 3.5pc;
    vertical-align: middle;
    display: flex;
    align-items: center;
    margin: auto;
    padding-left: 1pc;
    margin-top: 4pc;
	position: relative;
}

.mini{
    font-size: 2pc;
    display: contents;
}

.miniText{
    font-size: 2pc;
}

.relationshipDiv div {
    font-size: 1.5pc;
    vertical-align: bottom;
    position: absolute;
    right: 0.5pc;
    bottom: 0.5pc;
}

.actionsButtons{
    position: fixed;
    bottom: 3pc;
    height: 5pc;
    padding: 2.5pc;
}

.actionsButtons img{
    height: inherit;
}

.loading{
  animation: spin 2s linear infinite;
}


@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.mediumSelect option{
	font-size:2.5pc;	
}

.inlineBlock{
	display:inline-block;	
}

.smallMarginRight{
    margin-right: 1pc;
}

.alingRight{
	text-align: right;
}

.alingLeft{
	text-align: left;
}

input[type="checkbox"]{
  	accent-color: #b04d3b;
	height: 3pc;
	width: 3pc;
}

.verticalMiddle{
	vertical-align: middle;
}

.horizzontalMiddle{
    justify-content: center;
    text-align: center;
}

.notSelected{
    background: linear-gradient(90deg, rgb(86 86 86 / 34%) 0%, rgb(131 131 131 / 21%) 45%, rgb(128 128 128 / 19%) 100%)!important;
    text-shadow: 0px 0.5pc 0px #4d4d4d!important;
    box-shadow: 0px 0.5pc 0px rgb(49 49 49 / 50%);
}

.notSelectedPopUp{
    background: linear-gradient(90deg, rgb(86 86 86 / 50%) 0%, rgb(131 131 131 / 35%) 45%, rgb(128 128 128 / 41%) 100%)!important;
    text-shadow: 0px 0.5pc 0px #4d4d4d!important;
    box-shadow: 0px 0.5pc 0px rgb(42 42 42 / 25%)!important;
}

.cubettoGialloPopUp{
    border-color: #4c3e13b8!important;
    background: linear-gradient(109deg, rgb(70 81 21 / 81%) 0%, rgb(74 68 15) 45%, rgb(85 92 26 / 93%) 100%)!important;
    box-shadow: 0px 0.5pc 0px rgb(138 122 65 / 25%), 0 2pc 7pc 0 rgb(0 0 0)!important;
}


.popUpCenter{
	background: linear-gradient(109deg, rgb(22 2 21 / 79%) 0%, rgb(33 5 32 / 95%) 50%, rgb(19 5 32 / 83%) 100%);
    width: 80vw;
    position: fixed;
    top: 50%;
    z-index: 10;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: #00000033;
    box-shadow: 0px 0.5pc 0px rgb(41 6 47 / 46%), 0 2pc 7pc 0 rgb(0 0 0);
}

.xButton{
    position: absolute;
    right: 2pc;
    height: 2pc;
    width: 2pc;
    font-size: 2pc;
    background-color: #db3f22b5;
}

.xButton:active {
	top:1.5pc;
	box-shadow: none;
}

.divDeclineRequest{
    background: linear-gradient(109deg, rgb(102 102 102 / 41%) 0%, rgb(104 104 104 / 41%) 45%, rgb(71 71 71 / 51%) 100%);
    font-size: 2pc;
    box-shadow: 0px 0.5pc 0px rgb(64 64 64 / 53%);
    padding: 1pc;
    border-color: #00000052;
    opacity: 0.9;
}
.divDeclineRequest:active {
	position:relative;
	top:0.5pc;
	box-shadow: none;
}

.divAcceptRequest{
    background: linear-gradient(109deg, rgb(168 38 146 / 41%) 0%, rgb(181 32 169 / 45%) 45%, rgb(171 31 119 / 47%) 100%);
    font-size: 2pc;
    box-shadow: 0px 0.5pc 0px rgb(106 32 110 / 54%);
    padding: 1pc;
    border-color: #20060c7a;
    opacity: 0.9;
}

.divAcceptRequest:active {
	position:relative;
	top:0.5pc;
	box-shadow: none;
}

.smallIconImg{
    height: 2.5pc;
    margin-right: 1pc;
	vertical-align:middle;
}

#headerButtons{
    justify-content: space-between;
    display: flex;
    margin-top: 3pc;
    margin-bottom: 3pc;
}

#appWrapper{
    width: 95vw;
    box-sizing: border-box;
    height: calc(100% - 15pc);
	background: linear-gradient(112deg, rgb(205 2 255 / 9%) 0%, rgb(81 0 255 / 6%) 45%, rgb(48 125 255 / 10%) 100%);
    border-color: #0000006b;
    box-shadow: 0px 0.5pc 0px rgb(33 7 53 / 21%);
    background: none;
    border: none;
    box-shadow: none;
}

.paneSelector{
	display: flex;
}

.paneSelector div{
    flex-grow: 1;
}

.paneSelectorSecondary{
    z-index: 2;
    position: relative;
}

.paneSelectorSecondary>div{
	font-size: 1.5pc;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cubettoGrigio{
/*    border-color: #393939;
    background-color: #a9a8a87d;
    box-shadow: 0px 0.5pc 0px rgb(91 91 91 / 25%);*/
	border-color: #29292938;
    box-shadow: 0px 0.5pc 0px rgb(54 54 54 / 25%);
    background: linear-gradient(90deg, rgb(86 86 86 / 34%) 0%, rgb(131 131 131 / 21%) 45%, rgb(128 128 128 / 19%) 100%);
}

.cubettoGiallo{
/*    border-color: #3c2f09;
    background-color: #f9ff1e82;
    box-shadow: 0px 0.5pc 0px rgb(166 130 28 / 25%);*/
    border-color: #38360d8a;;
    background: linear-gradient(85deg, rgb(158 181 52 / 36%) 0%, rgb(190 190 29 / 38%) 45%, rgb(175 205 34 / 29%) 100%);
    box-shadow: 0px 0.5pc 0px rgb(123 122 22 / 25%);
}

.cubettoMirtillo{
/*    border-color: #470a0a;
    background-color: #c6364c7d;
    box-shadow: 0px 0.5pc 0px rgb(172 29 29 / 25%);*/
	border-color: #24030370;
    background: linear-gradient(90deg, rgba(255,63,109,0.14049369747899154) 0%, rgba(121,9,113,0.5046393557422969) 50%, rgba(255,0,142,0.19371498599439774) 100%);
    box-shadow: 0px 0.5pc 0px rgb(132 0 63 / 29%);
}

.cubettoPrugna{
/*    border-color: #470a32;
    background-color: #9e40cc7d;
    box-shadow: 0px 0.5pc 0px rgb(133 29 172 / 25%);*/

    border-color: #00000063;
    background: linear-gradient(90deg, rgba(95,63,255,0.14049369747899154) 0%, rgba(47,9,121,0.5046393557422969) 50%, rgba(0,48,255,0.19371498599439774) 100%);
    box-shadow: 0px 0.5pc 0px rgb(50 19 139 / 39%);
}

.cubettoVerde{
/*    border-color: #0a471c;
    background-color: #38b96c7d;
    box-shadow: 0px 0.5pc 0px rgb(31 137 58 / 25%);*/
    border-color: #052219;
    background: linear-gradient(90deg, rgb(0 132 69 / 32%) 0%, rgb(31 143 34 / 43%) 45%, rgb(22 125 67 / 38%) 100%);
    box-shadow: 0px 0.5pc 0px rgb(11 70 18 / 44%);
}

.cubettoRosso {
    border-color: #470a0a;
	background: linear-gradient(109deg, rgb(135 14 14 / 41%) 0%, rgb(91 8 5 / 45%) 45%, rgb(95 12 9 / 47%) 100%);
    box-shadow: 0px 0.5pc 0px rgb(53 7 7 / 50%);
}

.starsButtons{
    display: flex;
}

.starsPopUpDiv{
	min-height: 5pc;
    max-height: 85vh;
    position: fixed;
    z-index: 2;
}

#recepitsDiv>div{
    display: flex;
    border-bottom: solid #847f09;
    padding-top: 1pc;
    padding-bottom: 1pc;
}

#recepitsDiv>div:nth-last-child(1){
    padding-bottom: unset;
    border-bottom: unset;
}

#recepitsDiv>div>div{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
	margin-right: 3pc;
}

#recepitsDiv>div>div>div:nth-child(1){
	font-size:2pc;
    margin-bottom: 0.5pc;
}

#recepitsDiv>div>div>div:nth-child(1)::first-letter {
    text-transform:capitalize;
}

#recepitsDiv>div>div>div:nth-child(2){
	font-size:1.5pc;
}

#recepitsDiv>div>div>div:nth-child(3){
	font-size: 1.5pc;
	text-align: right;
    padding-top: 0.5pc;
}

#recepitsDiv>div>div:nth-child(1){
	font-size:4.5pc;
}

#recepitsDiv>div>div:nth-child(2){
    flex-grow: 1;
}

.cubettoGialloInput::placeholder {
	color: #fffa;
	text-shadow: 0px 0px 1pc rgba(255,255,255,.50);
}

#recepitsDiv{
    overflow: scroll;
    max-height: 75vh;
}

.miniCubetto{
    flex-grow: 0 !important;
    padding-right: 0;
}

.paddingBottom{
	padding-bottom:10pc;
}

#btnAddItem{
    position: absolute;
    bottom: 6pc;
    width: 90%;
    box-sizing: border-box;
    left: 5%;
}

#btnAddItem:active {
    bottom: 5.5pc;
	box-shadow: none;
}

.littleSpacer{
    height: 2pc;
}

.itemWrapper{
	display: flex;
    align-items: center;
	margin-top: 1pc;
    background: linear-gradient(90deg, rgb(255 255 255 / 17%) 0%, rgb(255 255 255 / 20%) 45%, rgb(255 255 255 / 16%) 100%);
    border-color: #ffffff2b;
    box-shadow: 0px 0.5pc 0px rgb(255 255 255 / 11%);
}

.itemWrapper>div:nth-child(1){
    flex-grow: 1;
}

.Xitem{
    font-size: 1.7pc;
    opacity: 50%;	
}

.itemDescription{
    font-size: 1.8pc;
    margin-top: 1pc;
    text-align: left;
    font-weight: normal;
}

.iconSelector{
	display:none;
}

#addItem textarea::placeholder {
	color: #bbb;
	text-shadow: 0px 0px 1pc rgba(255,255,255,.50);
}

.contentWrapper {
    height: calc(100% - 11.5pc);
    overflow: scroll;
    margin-top: 1.5pc;
    padding-bottom: 1pc;
}

.contentWrapperButton {
    height: calc(100% - 19.5pc);
    overflow: scroll;
    margin-top: 1.5pc;
    padding-bottom: 1pc;
}

.disciplineWrapper {
    display: flex;
    align-items: stretch;
    margin-top: 1pc;
    background: linear-gradient(90deg, rgb(255 255 255 / 17%) 0%, rgb(255 255 255 / 20%) 45%, rgb(255 255 255 / 16%) 100%);
    border-color: #6868684f;
    box-shadow: 0px 0.5pc 0px rgb(255 255 255 / 11%);
    flex-direction: column;
}

.disciplineWrapper>div:nth-child(1) {
    display: flex;
}

.disciplineWrapper>div:nth-child(1)>div:nth-child(1) {
    flex-grow: 1;
}

.disciplineWrapper>div:nth-child(2) {
    display: flex;
    justify-content: space-between;
    padding-top: 1pc;
}

.disciplineWrapper>div:nth-child(2)>div:nth-child(2) {
    display: flex;
}

.disciplineWrapper>div:nth-child(2)>div:nth-child(2) {
    font-size: 1.6pc;
}

.divWheelWrapper{
    display: flex;
    align-items: stretch;
    margin-top: 1pc;
    background: linear-gradient(90deg, rgb(255 255 255 / 17%) 0%, rgb(255 255 255 / 20%) 45%, rgb(255 255 255 / 16%) 100%);
    border-color: #6868684f;
    box-shadow: 0px 0.5pc 0px rgb(255 255 255 / 11%);
    flex-direction: column;
}

.divWheelWrapper>div:nth-child(1) {
    display: flex;
}

.divWheelWrapper>div:nth-child(1)>div:nth-child(1) {
    flex-grow: 1;
}

.divWheelWrapper>div:nth-child(2) {
    font-size: 1.8pc;
    margin-top: 1pc;
    text-align: left;
    font-weight: normal;
}

.interactionDiscipline{
    font-size: 2pc;
    padding: 1pc;
    font-weight: normal;
}

.interactionDiscipline:active {
	position:relative;
	top:0.5pc;
	box-shadow: none;
}

.interactionrule{
    font-size: 1.98pc!important;
}

.interactiontask{
    background: linear-gradient(109deg, rgb(136 168 38 / 41%) 0%, rgb(181 179 32 / 45%) 45%, rgb(171 163 31 / 47%) 100%);
    border-color: #20060c7a;
    box-shadow: 0px 0.5pc 0px rgb(110 99 32 / 54%);
}

.interactionactivity{
    background: linear-gradient(109deg, rgb(38 128 168 / 41%) 0%, rgb(32 110 181 / 45%) 45%, rgb(31 101 171 / 47%) 100%);
    border-color: #20060c7a;
    box-shadow: 0px 0.5pc 0px rgb(32 58 110 / 54%);
}

.interactionreward{
    border-color: #052219;
    background: linear-gradient(90deg, rgb(0 132 69 / 32%) 0%, rgb(31 143 34 / 43%) 45%, rgb(22 125 67 / 38%) 100%);
    box-shadow: 0px 0.5pc 0px rgb(11 70 18 / 44%);
}

#curtainDiv{
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    background: #000000d6;
    z-index: 2;
}

#divAddItemRecurrence{
    padding-bottom: 3pc;
}

#divWheelItems{
	height: 30vh;
    margin-top: 1pc;
    overflow: scroll;
}

.popUpLastDiv{
    padding-bottom: 5pc;
}

.disabledPane{
    text-shadow: none;
    opacity: 0.5;
}

.cubettoItemWheel{
    background: linear-gradient(109deg, rgb(38 128 168 / 41%) 0%, rgb(32 110 181 / 45%) 45%, rgb(31 101 171 / 47%) 100%);
    border-color: #20060c7a;
    box-shadow: 0px 0.5pc 0px rgb(32 58 110 / 54%);
}

.divWheelInteraction{
    display: flex;
    font-weight: normal;
}

.divWheelFreeSpin{
    background: linear-gradient(109deg, rgb(136 168 38 / 41%) 0%, rgb(181 179 32 / 45%) 45%, rgb(171 163 31 / 47%) 100%);
    border-color: #20060c7a;
    box-shadow: 0px 0.5pc 0px rgb(110 99 32 / 54%);
    width: 50%;
    font-size: 2pc;
}

.divWheelSpinZero{
    background: linear-gradient(109deg, rgb(38 128 168 / 41%) 0%, rgb(32 110 181 / 45%) 45%, rgb(31 101 171 / 47%) 100%);
    border-color: #20060c7a;
    box-shadow: 0px 0.5pc 0px rgb(32 58 110 / 54%);
    width: 100%;
    font-size: 2pc;
}

.divWheelSpin{
    background: linear-gradient(109deg, rgb(38 128 168 / 41%) 0%, rgb(32 110 181 / 45%) 45%, rgb(31 101 171 / 47%) 100%);
    border-color: #20060c7a;
    box-shadow: 0px 0.5pc 0px rgb(32 58 110 / 54%);
    width: 50%;
    font-size: 2pc;
}

td.the_wheel
{
    background-image: url('../img/default/wheel_back_white.png');
    background-position: center;
    background-repeat: none;
}

.popupWheel{
	background:none!important;
	border: none!important;
    box-shadow: none!important;
}

#btnWheelConfirm{
    background: linear-gradient(109deg, rgb(228 228 228 / 41%) 0%, rgb(237 237 237 / 45%) 45%, rgb(219 219 219 / 47%) 100%);
    border-color: #20060c7a;
    box-shadow: 0px 0.5pc 0px rgb(108 108 108 / 54%);
    text-shadow: 0px 0.5pc 0px #909090;
    top: -2pc;
    position: relative;
}

#divSettingsCategories{
    display: flex;
    align-items: stretch;
    flex-direction: column;
}

#divSettingsCategories>div{
    display: flex;
    justify-content: space-evenly;
    align-content: stretch;
    align-items: center;
    margin-bottom: 1pc;
}

#divSettingsCategories>div>div:nth-child(1){
    flex-grow: 1;
}