html,body
{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #ffffff;
  font-family: Roboto Slab;
  overflow: auto;
}

h1,h2,h3
{
  text-align: center;
}

h1
{
  margin: 10px auto;
  font-size: 32px;
  color: yellowgreen;
  font-style: italic;
}

h2
{
  margin: 5px auto;
  font-size: 24px;
  color: yellowgreen;
  font-style: italic;
}

h3
{
  margin: 5px auto;
  font-size: 20px;
  word-wrap: break-word;
  color: yellowgreen;
  font-style: italic;
}

a, u {text-decoration: none; color: inherit;}

input[type="checkbox"]
{
  width: 20px;
  height: 20px;
  cursor: pointer;
}

button:focus { outline: none; }

.overflowXAuto { overflow-x:auto !important; }
.overflowAuto { overflow:auto !important; }

.TableGreenBlue, .TableGreyBlue tbody td
{
  padding: 20px;
}

.TableGreenBlue tbody tr:nth-child(even)
{
  background-color: #2b6ca9;
  color: white;
}

.TableGreenBlue tbody tr:nth-child(odd)
{
  background-color: #9ACD32;
  color: black;
}

.TableGreyBlue tbody tr:nth-child(even)
{
  background-color: #2b6ca9;
  color: white;
}

.TableGreyBlue tbody tr:nth-child(odd)
{
  background-color: #333333;
  color: white;
}

.inputDefault
{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  min-height: 40px;
  margin: 0px auto;
  margin-top: 30px !important;
  border-radius: 3px;
  border-color: transparent;
  background-color: #234c74;
  color: white !important;
  font-family: Patua One;
  font-size: 16px;
  box-shadow: 0 0 5px 5px #9ACD32aa;
  cursor: pointer;
  transition: 0.5s;
  padding: 5px;
  margin: 20px;
  transition: 0.5s;
}

.inputDefault:hover
{
  box-shadow: 0 0 8px 8px #9ACD32bb;
  transition: 0.5s;
}

.inputDefaultStyle
{
  border-radius: 3px;
  border-color: transparent;
  background-color: #234c74;
  color: white !important;
  font-family: Patua One;
  font-size: 16px;
  cursor: pointer;
  transition: 0.5s;
  padding: 5px;
  margin: 20px;
}

.inputSnow
{
  background-color: snow;
  color: black;
  font-family: Roboto Slab;
  font-size: 16px;
  border-radius: 5px;
  border-style: none;
  padding: 10px;
}

.inputSnow::placeholder { color: black !important; }

.submitDefault
{
  min-height: 50px;
  color: white !important;
  box-shadow: none;
  font-size: 22px;
  transition: 0.5s;
}

.submitDefault:hover
{
  color: yellowgreen !important;
  box-shadow: 0 0 5px 5px #9ACD32aa;
  transform: scale(1.1,1.1);
  transition: 0.5s;
}

::placeholder
{
  color: white !important;
  opacity: 1;
}

.buttonDefault
{
  min-width: 200px;
  padding: 15px;
  font-family: Patua One;
  color: white;
  font-size: 22px;
  cursor: pointer;
  transition: 0.5s;
  border-radius: 3px;
  border-color: transparent;
}

.buttonDefault:hover
{
  transform: scale(1.1,1.1);
  transition: 0.5s;
}

.buttonBlueGreen
{
  background-color: #2b6ca9;
  min-width: 200px;
  padding: 15px;
  font-family: Patua One;
  color: white;
  font-size: 22px;
  cursor: pointer;
  transition: 0.5s;
  border-radius: 3px;
  border-color: transparent;
}

.buttonBlueGreen:hover
{
  background-color: #2b6ca9;
  box-shadow: 0 0 10px 4px #2b6ca9;
  transform: scale(1.1,1.1);
  transition: 0.5s;
}

.buttonSmall
{
  min-width: 100px;
  padding: 10px;
  font-family: Patua One;
  font-size: 14px;
  cursor: pointer;
  transition: 0.5s;
  border-radius: 3px;
  border-color: transparent;
}

.buttonSmall:hover
{
  transform: scale(1.1,1.1);
  transition: 0.5s;
}

.buttonBlue
{
  background-color: #2b6ca9;
  color: white;
}

.buttonBlue:hover
{
  background-color: #2b6ca9;
  box-shadow: 0 0 10px 4px #9ACD32;
}

.buttonRed
{
  background-color: #990500;
  color: white;
}

.buttonRed:hover
{
  background-color: #990500;
  box-shadow: 0 0 2px 2px #990500;
}

.buttonGreen
{
  background-color: #9ACD32;
  color: white;
}

.buttonGreen:hover
{
  background-color: #9ACD32;
  box-shadow: 0 0 2px 2px #9ACD32;
}

.buttonGrey
{
  background-color: #333333;
  color: white;
  pointer-events: none;
}

.buttonGrey:hover
{
  background-color: #444444;
  box-shadow: 0 0 2px 2px #333333;
}

.RigaCategoriaEditProfile:nth-child(odd)
{
  background-color: #2b6ca9;
}

.RigaCategoriaEditProfile:nth-child(odd) b
{
  color: #9ACD32;
}

.RigaCategoriaEditProfile:nth-child(even)
{
  background-color: #9ACD32;
}

.RigaCategoriaEditProfile:nth-child(even) b
{
  color: #2b6ca9;
}

li
{
  position: relative;
  list-style-type: none;
  margin-bottom: 30px;
}

li:before
{
  content: "";
  position: absolute;
  top: 0px;
  left: -40px;
  width: 32px;
  height: 32px;
  background-image: url('../img/Globe32x32.png');
}

.row
{
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

.rowVert
{
  display: flex;
  flex-flow: row wrap;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

.rowFullH
{
  display: flex;
  flex-flow: row wrap;
  align-items: end;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: auto;
  margin: 0 auto;
  padding: 0;
}

.col
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  padding: 0;
}

.colTop
{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 0;
}

.inlineFlex{ display: inline-flex; }
.alignSelfCenter {align-self: center;}
.alignCenter {align-items: center;}

.flexCenter
{
  align-items: center;
  justify-content: center;
}

.floatLeft {float: left;}
.floatRight {float: right;}

.whiteSpaceNormal {white-space: normal;}

/* FLexbox fix */
*
{
  max-width: 100%;
  min-height: 1px;
  box-sizing:border-box;
}

.col100{width: 100%;}
.col95{width: 95%;}
.col90{width: 90%;}
.col85{width: 85%;}
.col80{width: 80%;}
.col75{width: 75%;}
.col70{width: 70%;}
.col66{width: 66%;}
.col65{width: 65%;}
.col60{width: 60%;}
.col55{width: 55%;}
.col50{width: 50%;}
.col45{width: 45%;}
.col40{width: 40%;}
.col35{width: 35%;}
.col33{width: 33%;}
.col30{width: 30%;}
.col25{width: 25%;}
.col20{width: 20%;}
.col15{width: 15%;}
.col10{width: 10%;}
.colDiv12{width: 8.333333%;}
.col5{width: 5%;}

.maxWidth70 { max-width: 70px !important; }
.maxWidth80 { max-width: 80px !important; }

.col25FotoProfilo{width: 25%;}
.col50FotoProfilo{width: 50%;}

::placeholder{ color: black; }

.displayNone{display: none !important;}

.alignLeft{text-align: left;}
.alignCenter{text-align: center;}
.alignRight{text-align: right;}

.alignSelf-FlexStart{ align-self: flex-start; }
.alignSelf-FlexEnd{ align-self: flex-end; }
.alignSelf-Center{ align-self: center; }

.alignItems-FlexStart{ align-items: flex-start; }
.alignItems-FlexEnd{ align-items: flex-end; }
.alignItems-Center{ align-items: center; }

.justifyContent-FlexStart { justify-content: flex-start; }
.justifyContent-FlexEnd { justify-content: flex-end; }
.justifyContent-Center { justify-content: center; }

.flexDirectionRow{ flex-direction: row; }
.flexDirectionColumn{ flex-direction: column; }

.blockLeft
{
  display: block;
  text-align: left;
}

.blockRight
{
  display: block;
  text-align: right;
}

.blockCenter
{
  display: block;
  text-align: center;
  margin: auto;
}

.blockJustify
{
  display: block;
  text-align: justify;
}

.displayFlex{ display: flex; }
.displayBlock{ display: block; }
.displayInlineBlock{ display: inline-block; }

.verticalAlignTop { vertical-align: top; }
.verticalAlignMiddle { vertical-align: middle; }
.verticalAlignBottom { vertical-align: bottom; }

.centerText{text-align: center;}
.leftText{text-align: left;}
.rightText{text-align: right;}

.padding0{padding: 0px !important;}
.padding5{padding: 5px !important;}
.padding10{padding: 10px !important;}
.padding20{padding: 20px !important;}
.padding30{padding: 30px !important;}
.padding40{padding: 40px !important;}
.padding50{padding: 50px !important;}
.padding100{padding: 100px !important;}

.paddingTop0{padding-top: 0px !important;}
.paddingTop5{padding-top: 5px !important;}
.paddingTop10{padding-top: 10px !important;}
.paddingTop20{padding-top: 20px !important;}
.paddingTop30{padding-top: 30px !important;}
.paddingTop40{padding-top: 40px !important;}
.paddingTop50{padding-top: 50px !important;}
.paddingTop100{padding-top: 100px !important;}

.paddingBottom0{padding-bottom: 0px !important;}
.paddingBottom5{padding-bottom: 5px !important;}
.paddingBottom10{padding-bottom: 10px !important;}
.paddingBottom20{padding-bottom: 20px !important;}
.paddingBottom30{padding-bottom: 30px !important;}
.paddingBottom40{padding-bottom: 40px !important;}
.paddingBottom50{padding-bottom: 50px !important;}
.paddingBottom100{padding-bottom: 100px !important;}

.paddingLeft0{padding-left: 0px !important;}
.paddingLeft5{padding-left: 5px !important;}
.paddingLeft10{padding-left: 10px !important;}
.paddingLeft20{padding-left: 20px !important;}
.paddingLeft30{padding-left: 30px !important;}
.paddingLeft40{padding-left: 40px !important;}
.paddingLeft50{padding-left: 50px !important;}
.paddingLeft100{padding-left: 100px !important;}

.paddingRight0{padding-right: 0px !important;}
.paddingRight5{padding-right: 5px !important;}
.paddingRight10{padding-right: 10px !important;}
.paddingRight20{padding-right: 20px !important;}
.paddingRight30{padding-right: 30px !important;}
.paddingRight40{padding-right: 40px !important;}
.paddingRight50{padding-right: 50px !important;}
.paddingRight100{padding-right: 100px !important;}

.paddingV0{padding-top: 0px !important; padding-bottom: 0px !important;}
.paddingV5{padding-top: 5px !important; padding-bottom: 5px !important;}
.paddingV10{padding-top: 10px !important; padding-bottom: 10px !important;}
.paddingV20{padding-top: 20px !important; padding-bottom: 20px !important;}
.paddingV30{padding-top: 30px !important; padding-bottom: 30px !important;}
.paddingV40{padding-top: 40px !important; padding-bottom: 40px !important;}
.paddingV50{padding-top: 50px !important; padding-bottom: 50px !important;}
.paddingV100{padding-top: 100px !important; padding-bottom: 100px !important;}

.paddingH0{padding-left: 0px !important; padding-right: 0px !important;}
.paddingH5{padding-left: 5px !important; padding-right: 5px !important;}
.paddingH10{padding-left: 10px !important; padding-right: 10px !important;}
.paddingH20{padding-left: 20px !important; padding-right: 20px !important;}
.paddingH30{padding-left: 30px !important; padding-right: 30px !important;}
.paddingH40{padding-left: 40px !important; padding-right: 40px !important;}
.paddingH50{padding-left: 50px !important; padding-right: 50px !important;}
.paddingH100{padding-left: 100px !important; padding-right: 100px !important;}

.margin0{margin: 0px !important;}
.margin0Auto{margin: 0 auto !important;}
.margin5Auto{margin: 5px auto !important;}
.margin10Auto{margin: 10px auto !important;}
.margin20Auto{margin: 20px auto !important;}
.margin30Auto{margin: 30px auto !important;}
.margin40Auto{margin: 40px auto !important;}
.margin50Auto{margin: 50px auto !important;}
.margin100Auto{margin: 100px auto !important;}

.margin0{margin: 0px !important;}
.margin5{margin: 5px !important;}
.margin10{margin: 10px !important;}
.margin20{margin: 20px !important;}
.margin30{margin: 30px !important;}
.margin40{margin: 40px !important;}
.margin50{margin: 50px !important;}
.margin100{margin: 100px !important;}

.marginTop0{margin-top: 0px !important;}
.marginTop5{margin-top: 5px !important;}
.marginTop10{margin-top: 10px !important;}
.marginTop20{margin-top: 20px !important;}
.marginTop30{margin-top: 30px !important;}
.marginTop40{margin-top: 40px !important;}
.marginTop50{margin-top: 50px !important;}
.marginTop100{margin-top: 100px !important;}

.marginBottom0{margin-bottom: 0px !important;}
.marginBottom5{margin-bottom: 5px !important;}
.marginBottom10{margin-bottom: 10px !important;}
.marginBottom20{margin-bottom: 20px !important;}
.marginBottom30{margin-bottom: 30px !important;}
.marginBottom40{margin-bottom: 40px !important;}
.marginBottom50{margin-bottom: 50px !important;}
.marginBottom100{margin-bottom: 100px !important;}

.marginRight0{margin-right: 0px !important;}
.marginRight5{margin-right: 5px !important;}
.marginRight10{margin-right: 10px !important;}
.marginRight20{margin-right: 20px !important;}
.marginRight30{margin-right: 30px !important;}
.marginRight40{margin-right: 40px !important;}
.marginRight50{margin-right: 50px !important;}
.marginRight100{margin-right: 100px !important;}

.marginLeft0{margin-left: 0px !important;}
.marginLeft5{margin-left: 5px !important;}
.marginLeft10{margin-left: 10px !important;}
.marginLeft20{margin-left: 20px !important;}
.marginLeft30{margin-left: 30px !important;}
.marginLeft40{margin-left: 40px !important;}
.marginLeft50{margin-left: 50px !important;}
.marginLeft100{margin-left: 100px !important;}

.marginV0{margin-bottom: 0px !important; margin-top: 0px !important;}
.marginV5{margin-bottom: 5px !important; margin-top: 5px !important;}
.marginV10{margin-bottom: 10px !important; margin-top: 10px !important;}
.marginV20{margin-bottom: 20px !important; margin-top: 20px !important;}
.marginV30{margin-bottom: 30px !important; margin-top: 30px !important;}
.marginV40{margin-bottom: 40px !important; margin-top: 40px !important;}
.marginV50{margin-bottom: 50px !important; margin-top: 50px !important;}
.marginV100{margin-bottom: 100px !important; margin-top: 100px !important;}

.marginH{margin-left: 0px !important; margin-right: 0px !important;}
.marginH5{margin-left: 5px !important; margin-right: 5px !important;}
.marginH10{margin-left: 10px !important; margin-right: 10px !important;}
.marginH20{margin-left: 20px !important; margin-right: 20px !important;}
.marginH30{margin-left: 30px !important; margin-right: 30px !important;}
.marginH40{margin-left: 40px !important; margin-right: 40px !important;}
.marginH50{margin-left: 50px !important; margin-right: 50px !important;}
.marginH100{margin-left: 100px !important; margin-right: 100px !important;}

.borderRadius3{border-radius: 3px !important;}
.borderRadius5{border-radius: 5px !important;}
.borderRadius10{border-radius: 10px !important;}
.borderRadius15{border-radius: 15px !important;}
.borderRadius20{border-radius: 20px !important;}
.borderRadius25{border-radius: 25px !important;}
.borderRadius30{border-radius: 30px !important;}
.borderRadius50{border-radius: 50px !important;}
.borderRadius100{border-radius: 100px !important;}
.borderRadius200{border-radius: 200px !important;}
.borderRadius300{border-radius: 300px !important;}
.borderRadius500{border-radius: 500px !important;}

.minWidth50{ min-width: 50px !important; }
.minWidth80{ min-width: 80px !important; }
.minWidth100{ min-width: 100px !important; }
.minWidth150{ min-width: 150px !important; }
.minWidth200{ min-width: 200px !important; }
.minWidth250{ min-width: 250px !important; }
.minWidth300{ min-width: 300px !important; }

.blackText{color: black !important;}
.whiteText{color: #ffffff !important;}
.redText{color: #C83232 !important;}
.greenText{color: #32C832 !important;}
.blueText{color: #639fe2 !important;}
.yellowText{color: #f4ec4e !important;}
.yellowGreenText{ color: yellowgreen; }
.bluePersText{ color: #2b6ca9; }
.goldText{ color: #FFD700; }

.backgroundColorTransparent { background-color: transparent !important; }
.backgroundColorSilver { background-color: silver; }
.backgroundColorBluePers { background-color: #2b6ca9 !important; }
.backgroundColorSnow { background-color: snow !important; }
.backgroundNone { background: none !important; }

.borderHidden { border: hidden; }
.cursorPointer { cursor: pointer; }

.fontSize10{font-size: 10px !important;}
.fontSize12{font-size: 12px !important;}
.fontSize14{font-size: 14px !important;}
.fontSize16{font-size: 16px !important;}
.fontSize18{font-size: 18px !important;}
.fontSize20{font-size: 20px !important;}
.fontSize22{font-size: 22px !important;}
.fontSize24{font-size: 24px !important;}
.fontSize26{font-size: 26px !important;}
.fontSize28{font-size: 28px !important;}
.fontSize30{font-size: 30px !important;}
.fontSize32{font-size: 32px !important;}
.fontSize34{font-size: 34px !important;}
.fontSize36{font-size: 36px !important;}
.fontSize38{font-size: 38px !important;}
.fontSize40{font-size: 40px !important;}
.fontSize42{font-size: 42px !important;}
.fontSize64{font-size: 64px !important;}

.fontSize1VH { font-size: 1vh !important; }
.fontSize2VH { font-size: 2vh !important; }
.fontSize3VH { font-size: 3vh !important; }
.fontSize4VH { font-size: 4vh !important; }
.fontSize5VH { font-size: 5vh !important; }
.fontSize6VH { font-size: 6vh !important; }
.fontSize7VH { font-size: 7vh !important; }
.fontSize8VH { font-size: 8vh !important; }

.fontBold{font-weight: bold;}
.fontNormal{font-weight: normal;}

.fontFamilyRobotoSlab { font-family: Roboto Slab; }
.fontFamilyPatuaOne { font-family: Patua One; }

.ModalStyle
{
  display: none;
  position: fixed;
  z-index: 1;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #000000dd;
  color: white;
}

.ModalProfiloPrimaRiga
{
  position: fixed;
  width: 100%;
  background-color: #234c74;
  color: white;
  margin-bottom: 20px;
  border-radius: 3px;
}

.ModalSecondaRiga { margin-top: 100px !important; }

.ModalNotificaBassa
{
  position: fixed;
  z-index: 1;
  left: 5%;
  top: 75%;
  width: 90%;
  height: 120px;
  padding: 10px;
  overflow: auto;
  background-color: #000000dd;
  color: white;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

.ContentWrapper
{
  min-height: 72vh;
  font-family: Patua One;
  overflow: scroll;
}

.ModalStyle::-webkit-scrollbar, .ModalNotificaBassa::-webkit-scrollbar { display: none; }
.ContentWrapper::-webkit-scrollbar { display: none; }

.imgUtenteProfilo { width: 90%; height: auto; border-radius: 5px;}
.imgUtenteProfiloSized { width: 256px; height: 256px; border-radius: 5px;}
.imgUtenteProfiloMiniatura { width: 64px; height: auto; border-radius: 50px;}
.imgOnda { width: 512px; height: auto; }
.imgOnda256 { width: 256px; height: auto; }
.imgGlobe256x256 { width: 256px; height: auto; }
.imgGlobe512x512 { width: 512px; height: auto; }
.imgPhotoFeed
{
  width: 100%;
  height: auto;
  padding: 5px;
  border-radius: 10px !important;
}
.imgUtenteFoto
{ 
  width: auto;
  height: auto;
  border-radius: 5px;
}
.imgSpotMiniatura
{
  width: 100%;
  max-width: 128px;
  height: auto;
  padding: 5px;
  border-radius: 128px !important;
}
.imgSpotMiniatura200
{
  width: 100%;
  max-width: 200px;
  height: auto;
  padding: 5px;
  border-radius: 128px !important;
}
.fastyle {
        padding: 20px;
        font-size: 30px;
        width: 100px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        border-radius: 3px;
     }

.fa:hover { opacity: 0.7; }

.fa-times-thin:before {
  content: '\00d7';
}

.fa-facebook { background: #3B5998; color: white; }
.fa-twitter { background: #55ACEE; color: white; }
.fa-google { background: #dd4b39; color: white; }
.fa-linkedin { background: #007bb5; color: white; }
.fa-youtube { background: #bb0000; color: white; }
.fa-instagram { background: #125688; color: white; }
.fa-pinterest { background: #cb2027; color: white; }
.fa-snapchat-ghost
{ 
  background: #fffc00;
  color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}
.fa-twitch { background: #6441a4; color: white; }
.fa-globe { background: #125688; color: white; }
.fa-map-marker:not(.fa-map-marker-globe) { background: #125688; color: white; }
.fa-money { background: #125688; color: #FFD700; }
.fa-at { background: #decf00; color: white; }
.fa-envelope { background: #125688; color: white; }
.fa-image { background: #125688; color: white; }
.fa-edit { background: #9ACD32; color: white; }


.cursorPointer { cursor: pointer; }
.borderNone { border: none; }

.HomeBarraTitolo
{
  background-color: #12283d;
  color: white;
  font-family: Patua One;
  font-size: 28px;
  padding: 10px;
}

.HomeBarraFooter
{
  background-color: #12283d;
  color: white;
  font-family: Roboto Slab;
  font-size: 16px;
  padding: 30px;
}

.BarraNomeUtente
{ 
  padding-left: 30px;
  line-height: 1.3;
  word-break: break-word;
}

.BarraFotoUtente 
{ 
  align-items: flex-end;
}

.wordBreak-BreakWord { word-break: break-word; }

.minWidth50 { min-width: 50px !important; }
.minWidth100 { min-width: 100px !important; }
.minWidth150 { min-width: 150px !important; }
.minWidth200 { min-width: 200px !important; }
.minWidth300 { min-width: 300px !important; }

.Width50 { width: 50px !important; }
.Width80 { width: 80px !important; }
.Width100 { width: 100px !important; }
.Width150 { width: 150px !important; }
.Width200 { width: 200px !important; }
.Width300 { width: 300px !important; }

.minHeight50 { min-height: 50px !important; }
.minHeight100 { min-height: 100px !important; }
.minHeight150 { min-height: 150px !important; }
.minHeight200 { min-height: 200px !important; }
.minHeight300 { min-height: 300px !important; }

.Height50 { height: 50px !important; }
.Height100 { height: 100px !important; }
.Height150 { height: 150px !important; }
.Height200 { height: 200px !important; }
.Height300 { height: 300px !important; }

.lineHeight5 { line-height: 5px; }
.lineHeight10 { line-height: 10px; }
.lineHeight20 { line-height: 20px; }
.lineHeight30 { line-height: 30px; }
.lineHeight40 { line-height: 40px; }
.lineHeight50 { line-height: 50px; }
.lineHeight100 { line-height: 100px; }

.heightFull { height: 100% !important; }

.globeChatButton
{
  position: fixed;
  top: 2vh;
  left: 2vh;
  color: white;
}

.globeInboxButton
{
  position: fixed;
  top: 2vh;
  left: 12vh;
  color: white;
}

.globeSearchNearMeButton
{
  position: fixed;
  top: 2vh;
  right: 12vh;
  color: white;
}

.globeSettingsButton
{
  position: fixed;
  top: 2vh;
  right: 2vh;
  color: white;
}

.globeBackToProfileButton, .globeBackToHomeButton
{
  position: fixed;
  bottom: 2vh;
  left: 2vh;
  color: white;
}

.globeGamesButton
{
  position: fixed;
  bottom: 2vh;
  left: 12vh;
  color: white;
}

.globeMyPrivateSpotsButton
{
  position: fixed;
  bottom: 2vh;
  right: 12vh;
  color: white;
}

.globePhotosButton
{
  position: fixed;
  bottom: 2vh;
  right: 2vh;
  color: white;
}

#GlobeTotaleMessaggiDaLeggere
{
  display: flex;
  font-size: 4vh;
  justify-self: center;
  align-self: center;
  margin-left: 4vh;
  font-family: Roboto Slab;
}

.InboxMessaggiDaLeggere
{
  min-width: 40px;
  text-align: center;
  align-self: center;
  margin-left: 15px;
  background-color: #2b6ca9;
  color: white;
  padding: 10px;
  border-radius: 100px;
}

.chatHeaders
{
  display: inline-block;
  text-align: left;
  margin: 5px auto;
  font-size: 16px;
  padding-right: 10px;
  word-wrap: break-word;
  color: yellowgreen;
  font-style: italic;
}

.chatMessageWrapper
{
  max-height: 180px;
  background-color: snow;
  color: black;
  border-radius: 5px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  padding: 10px;
  white-space: pre-line;
  overflow-y: auto;
  align-self: center;
}

.chatMessage
{
  max-height: 180px;
  width: auto;
  max-width: 80%;
  background-color: snow;
  color: black;
  font-size: 14px;
  border-radius: 5px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  padding: 10px 20px 10px 20px;
  white-space: pre-line;
  overflow-y: auto;
  word-break: break-word;
  align-self: center;
  align-items: flex-start;
  justify-content: flex-start;
}

.chatNewMessage
{
  background-color: snow;
  color: black;
  font-family: Roboto Slab;
  font-size: 16px;
  border-radius: 5px;
  padding: 10px;
}

.chatNewMessage::placeholder { color: black !important; }

.chatHeadersRight
{
  display: inline-block;
  text-align: right;
  margin: 5px auto;
  font-size: 16px;
  padding-left: 10px;
  word-wrap: break-word;
  color: yellowgreen;
  font-style: italic;
}

.chatMessageRight
{
  max-height: 180px;
  width: auto;
  max-width: 600px;
  background-color: snow;
  color: black;
  font-size: 14px;
  border-radius: 5px;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  padding: 10px 20px 10px 20px;
  white-space: pre-line;
  overflow-y: auto;
  word-break: break-word;
  align-self: center;
  align-items: flex-start;
  justify-content: flex-start;
}

.chatReply{ cursor: pointer; }
.chatReply:hover{ background-color: #2b6ca9; }

.commentMessageWrapper
{
  max-height: 180px;
  background-color: snow;
  color: black;
  border-radius: 5px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  padding: 10px;
  white-space: pre-line;
  overflow-y: auto;
  align-self: center;
}

.commentMessage
{
  max-height: 180px;
  width: auto;
  background-color: snow;
  color: black;
  font-size: 14px;
  border-radius: 5px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  padding: 10px 20px 10px 20px;
  white-space: pre-line;
  overflow-y: auto;
  word-break: break-word;
  align-self: center;
  align-items: flex-start;
  justify-content: flex-start;
}

#chatArrowUp, #PMChatArrowUp
{
  z-index: 2;
  position: fixed;
  right: 2%;
  top: 18%;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

#chatArrowDown, #PMChatArrowDown
{
  z-index: 2;
  position: fixed;
  right: 2%;
  bottom: 5%;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.ImmagineProfiloCliccabile
{
  width: 40px;
  height: auto;
}

.Games_Dodge_ImmagineProfiloCliccabile
{
  width: 80px;
  height: auto;
  cursor: pointer;
}

.ImmagineFotoCliccabile, .FotoMySpotCliccabile
{
  cursor: pointer;
}

.W30HAuto
{
  width: 30px;
  height: auto;
}

.W40HAuto
{
  width: 40px;
  height: auto;
}

.ApriPMDaInbox { cursor: pointer; }
.ApriPMDaInbox:hover{ background-color: #2b6ca9; }

.Games_Dodge_PunteggioRecord
{
  position: fixed;
  top: 2vh;
  left: 2vh;
  color: white;
}

.Games_Dodge_PunteggioTotale
{
  position: fixed;
  top: 2vh;
  left: 0;
  color: white;
}

.Games_Dodge_RigaPulsanti
{
  position: fixed;
  bottom: 2vh;
  left: 0;
  color: white;
}

.GlobeMenuTopRight
{
  position: fixed;
  top: 2vh;
  right: 2vh;
  color: white;
}

.buttonBlueGreenRound
{
  background-color: #2b6ca9;
  width: 80px;
  height: 80px;
  padding: 15px;
  font-family: Patua One;
  color: white;
  font-size: 22px;
  cursor: pointer;
  transition: 0.5s;
  border-radius: 100px;
  border-color: transparent;
  box-shadow: 0px 5px 50px 5px #111111;
}

.buttonBlueGreenRound:hover
{
  background-color: #2b6ca9;
  box-shadow: 0 0 10px 4px #2b6ca9;
  transform: scale(1.1,1.1);
  transition: 0.5s;
}

.buttonBlueGreenRoundNoHover
{
  background-color: #2b6ca9;
  width: 80px;
  height: 80px;
  padding: 15px;
  color: white;
  font-size: 22px;
  cursor: pointer;
  border-radius: 100px;
  border-color: transparent;
  box-shadow: 0px 5px 50px 5px #111111;
}

.sfondoBluTrasparente
{
  background-color: #234c74aa;
  border-radius: 10px;
}

.sfondoBluScuro{ background-color: #0e1f30; }

.rotate180{ transform: rotate(180deg); }

.AnimationBeat
{
  animation-name: AnimazioneBeat;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes AnimazioneBeat
{
  0%  { transform:scale(1.0,1.0); }
  30% { transform:scale(1.3,1.3); }
  50% { transform:scale(2.0,2.0); }
  100% { transform:scale(1.0,1.0);}
}

.AnimationRotate360
{
  animation-name: AnimationRotate360;
  animation-duration: 3s;
  animation: AnimationRotate360 4s linear infinite;
}

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

@media only screen and (max-width: 768px)
{
  .col100:not(.colNoCollapse),
  .col95:not(.colNoCollapse),
  .col90:not(.colNoCollapse),
  .col85:not(.colNoCollapse),
  .col80:not(.colNoCollapse),
  .col75:not(.colNoCollapse),
  .col70:not(.colNoCollapse),
  .col66:not(.colNoCollapse),
  .col65:not(.colNoCollapse),
  .col60:not(.colNoCollapse),
  .col55:not(.colNoCollapse),
  .col50:not(.colNoCollapse),
  .col45:not(.colNoCollapse),
  .col40:not(.colNoCollapse),
  .col35:not(.colNoCollapse),
  .col33:not(.colNoCollapse),
  .col30:not(.colNoCollapse),
  .col25:not(.colNoCollapse),
  .col20:not(.colNoCollapse),
  .col15:not(.colNoCollapse),
  .col10:not(.colNoCollapse),
  .colDiv12:not(.colNoCollapse),
  .col5:not(.colNoCollapse){width: 100%;}

  .col25FotoProfilo{width: 15%;}
  .col50FotoProfilo{width: 70%;}

  .BarraNomeUtente
  { 
    line-height: 1.3;
    margin-left: 0px;
    text-align: center;
    padding-left: 0px;
  }

  .BarraFotoUtente{ align-items: center; }
  .imgUtenteProfiloMiniatura { width: 40px; }

  .hideMobile {display: none;}
}