/* -----------------------------------------------------------------------------
Engine:      Gametize
Author:     Gametize Pte Ltd
Description:  Library elements
----------------------------------------------------------------------------- */

/* ---- BACKGROUND OVERLAYS ---- */
.colorblock-black-overlay { background-color: #000 }
.background-color-white { background-color : #fff }
.background-color-grey-20 { background-color : #f7f7f7 }
.colorblock-mediumgrey-overlay { background-color : #ececec }
.colorblock-darkgrey-overlay { background-color : #222 }
.background-color-gametize-pink { background-color: #bc1954; }

/* ---- LISTS ---- */

ul.horizontal-list {
  list-style-type: none;
  margin : 0;
}

  ul.horizontal-list li {
    list-style-type: none;
    display: inline-block;
    float : left;
  }

ul.regularlist, ol.regularlist { margin-left: 30px }
ul.regularlist, ul.regularlist li, ol ul.regularlist, ol ul.regularlist li { list-style-type: square }
ol.regularlist, ol.regularlist li { list-style-type: decimal }
ul.list-style-position-inside, ol.list-style-position-inside { list-style-position: inside }

/* ---- BOXED CONTENT ---- */
.boxedcontent-roundedgrey, .boxedcontent-roundedwhite, .boxedcontent-roundeddarkgrey {
  padding : 15px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

.boxedcontent-roundeddarkgrey { background : #666 }
.boxedcontent-roundedgrey { background : #efefef }
.boxedcontent-roundedwhite { background : #fff }

/* ---- BLOCK LINKS - Entire Div clickable ---- */
.block-link-wrap a, .block-link-wrap input, .block-link-wrap textarea {
  position : relative;  /* Bring all content in front of background link */
  z-index : 50;
}

a.block-link {  /* Link to span entire challenge DIV */
  position:absolute !important;
    z-index : 1 !important;
    width : 100%; height : 100%;
    top:0; left: 0;
}

/* ---- LINKS IN PLAIN COLOR ---- */
a.vanillalink:link, a.vanillalink:visited { color : #292929 }
a.vanillalink:hover { text-decoration : none }

/* ---- ROUNDED STYLES ---- */

.block-rounded-top {
  -moz-border-radius: 12px 12px 0 0;
  -webkit-border-radius: 12px 12px 0 0;
  border-radius: 12px 12px 0 0;
  overflow : hidden;
}

.block-rounded-bottom {
  -moz-border-radius: 0px 0px 12px 12px;
  -webkit-border-radius: 0px 0px 12px 12px;
  border-radius: 0px 0px 12px 12px;
  overflow : hidden;
}

.block-rounded-all {
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  overflow : hidden;
}

/* ---- TEXT COLOR OVERRIDES ---- */

.text-on-darkbg h1,
.text-on-darkbg h2,
.text-on-darkbg h3,
.text-on-darkbg h4,
.text-on-darkbg h5,
.text-on-darkbg p,
.text-on-darkbg .metadata,
.text-on-darkbg {
  color : #fafafa !important;
}

/* ---- CUSTOM TEXT BLOCK TYPES ---- */

.fadeout { color : #8c8c8c }
.metadata { color : #292929; font-size: 0.75em; /* 12px */ line-height: 1.5; /* 16px */ }

.darn, .darn a { color : #db6800 !important }  /* Warning */
.oops, .oops a { color : #D11B18 !important }  /* Error */
.yay, .yay a { color : #3FA30D !important }    /* Pass */
.darn a, .oops a, .yay a { text-decoration : underline }

/* ---- TIP BOXES ---- */
.alert-note-box, .alert-tip-box, .alert-box, .alert-deadly-box {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding : 15px 15px 15px 65px;
  min-height : 40px; font-size : 0.875em; color : #292929;
}

.alert-note-box, .alert-box { border : 1px solid #cec67d }
.alert-note-box { background : #fdfad9 url(/images/core/business/icon_note.png) no-repeat 10px center }
.alert-box { background : #fdfad9 url(/images/core/business/icon_alert.png) no-repeat 10px center }

.alert-deadly-box {
  background : #fdd9d9 url(/images/core/business/icon_alert.png) no-repeat 10px center;
  border : 1px solid #c07171;
}

.alert-tip-box {
  background : #ffe7b3 url(/images/core/business/icon_tip.png) no-repeat 10px center;
  border : 1px solid #edc162;
}

/* ---- ALERT TAG ---- */
.default-tag {
  padding : 4px 6px; display : inline-block; background: #ccc; color: #fff; font-weight : normal;
  font-size: 0.875em; line-height: 1em;
  border-bottom: 1px solid #aaa;
  border-right: 1px solid #aaa;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.alert-tag { background : #c07171; border-color: #9f5757 }
.rank-owner-tag { background : #111; border-color: #111 }
.rank-admin-tag { background : #999; border-color: #999 }

/* ---- CURSORS ---- */
.cursorhelp { cursor : help }

/* ---- BASIC LIBRARY ---- */

/* Any element to be center-aligned on the screen - to be applied with other classes */
.contentcenterwrap { text-align : center }
.contentcenter {
  margin : 0 auto;
    position : relative;
  text-align : left;
  float: none !important;
  display : inline-block;
}

/* Force element to fill out entire width - usually used in conjunction with clearfix */
.contentblock { display : block }

/* For hidden elements */
.hidden { display: none }

/* For disabled elements */
.disabled { pointer-events: none }
.disabled-with-fadeout { pointer-events: none; opacity: 0.4 }

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

/* Paddings and margins */
.paddedall { padding : 15px;}                   /* Add full padding within an element */
.paddedvertical { padding : 15px 0px }          /* Add vertical (top and bottom) padding within an element */
.paddedhorizontal { padding : 0 15px }          /* Add horizontal (left and right) padding within an element */

.thickpaddedvertical { padding: 70px 0; }

.topmargin { margin-top : 15px }                /* Adds space above an element */
.bottommargin { margin-bottom : 15px }          /* Adds space below an element */
.leftmargin { margin-left : 15px }              /* Adds space on the left of an element */
.rightmargin { margin-right : 15px }            /* Adds space on the right of an element */
.topmarginextended { margin-top : 25px }        /* Adds space above an element, but slightly more */
.bottommarginextended { margin-bottom : 25px }  /* Adds space below an element, but slightly more */

.margin-left-xs { margin-left: 8px; }         /* Adds space on the left of an element, but slightly less */
.margin-bottom-xxs { margin-bottom: 5px; }         /* Adds space on the left of an element, but slightly less */

/* Alignments and floats */
.right { text-align : right; float : right; margin-left : 12px }
.left { text-align : left; float : left; margin-right : 12px }
.center { display: block; text-align : center }

/* Strip unwanted spaces or elements - especially for last elements in a row/list */
.nomargin { margin : 0 !important }
.nopadding { padding : 0 !important }
.noborder { border : 0 !important }

/* ---- REUSABLE CLASSES   ---- */
/*
  #BrendasFeedback:
  Yoohoo Amanda! Really appreciate all these classes!
  There are some overlapping classes though, so it will be great if you could make use of the existing ones, and add extensions
  only if there is no existing class to help you with what you need. (:
*/

.text-overflow { white-space: nowrap; text-overflow: ellipsis; max-width: 90%; overflow: hidden; vertical-align: bottom;}
/* #BrendasFeedback: Already have an existing class for this. Use 'truncate' */

.color-white { color: white!important;}
.color-grey { color: #999!important;}
.color-grey-medium { color: #555!important;}

.field-validation-message { color: #dc5757; font-size: 0.85em }

.img-circle { border-radius: 50%!important; -webkit-border-radius: 50%!important; -moz-border-radius: 50%!important;}
.img-responsive {
  max-width: 100%;
  width: 100%; /* IE fix for responsive image */
  height: auto;
}
.responsive {width: 100%!important;}             /* #BrendasFeedback: Already have an existing class for this. Use 'contentblock' */
.full-height { height:100vh; }

.position-relative {position: relative;}
.rounded-border { border-radius: 8px;}

.display-inline-block { display: inline-block;}
.display-block { display: block;}                 /* #BrendasFeedback: Already have an existing class for this. Use 'contentblock' */

.box-sizing-border-box { box-sizing: border-box; }
/* Alignment */
.text-align-left, .alignleft {text-align: left;}
.text-align-right, .alignright {text-align: right;}
.text-align-center {text-align: center;}          /* #BrendasFeedback: Already have an existing class for this. Use 'center' */

/* BRENDA TODO:
To validate usage, because some of them is used to put spaces in between
elements, in which 'margin' should be used instead */
.padding-left-15 { padding-left: 15px;}           /* #BrendasFeedback: Already have an existing class for this. Use 'paddedvertical' for vertical paddings. */
.padding-right-15 { padding-right: 15px;}         /* #BrendasFeedback: Already have an existing class for this. Use 'paddedhorizontal' for horizontal padding, 'rightmargin' for element spacing. */
.padding-right-10 { padding-right: 10px;}
.padding-bottom-10 { padding-bottom: 10px;}

.padding-md {padding: 15px;}
.padding-sm { padding: 10px; }
.padding-xs { padding: 8px; }

.padding-bottom-xxs { padding-bottom: 5px; }

/* Direction classes (used for message) */
.direction-ltr { direction: ltr; }
.direction-rtl {direction: rtl;}

.font-xl { font-size: 200%!important; }
.font-l { font-size: 140%!important; }
.font-m { font-size: 120%!important; }
.font-s { font-size: 100%!important; }
.font-xs {font-size: 80%!important;}

.light-grey-border-thick { border: 3px solid #ddd;}
.light-grey-border { border: 1px solid #ddd;}
.light-grey-border-right { border-right: 1px solid #ddd;}
.light-grey-border-left { border-left: 1px solid #ddd;}
.light-grey-border-bottom { border-bottom: 1px solid #ddd;}
.light-grey-border-top { border-top: 1px solid #ddd;}

.grey-border-thick { border: 5px solid #333;}
.grey-border { border: 1px solid #333;}
.grey-border-right { border-right: 1px solid #333;}
.grey-border-left { border-left: 1px solid #333;}
.grey-border-bottom { border-bottom: 1px solid #333;}
.grey-border-top { border-top: 1px solid #333;}

/* Flex */
.flex {display: flex;}
.flex-wrap { flex-wrap: wrap; }
.flex-no-shrink { flex-shrink: 0; }
.align-items-center { align-items: center; }
.align-self-center { align-self: center; }
.align-self-bottom { align-self: flex-end; }
.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-space-between { justify-content: space-between; }

.overflow-visible { overflow: visible; }

/* Bold */
.nobold { font-weight: normal; }
.bold { font-weight: 600; }
.bolder { font-weight: 700; }

/* For notifications */
.photo-icon-col.small {
    width: 65px;
    height: 65px;
    padding: 3px;
    padding-right: 20px;
}

.photo-icon-small {
  margin: -3px;
  display: block;
  padding-bottom: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: content-box;
  border-radius: 50%!important;
  -webkit-border-radius: 50%!important;
  -moz-border-radius: 50%!important;
}

  .photo-icon-small img {
      position: absolute;
      width: auto;
      object-fit: cover;
      min-width: 100%;
      min-height: 100%;
      left: 0;
      top: 0;
  }