/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

@import "node_modules/material-ui/src/less/scaffolding.less";
//Define a custom less file to override any variables defined in scaffolding.less
@import "my_overrides.less";
@import "node_modules/material-ui/src/less/components.less";

//////////// My custom app styles ////////////

// VARIABLES
@external-margin: 20px;
@card-margin: 20px;

// MIXINS
.clickable {
  cursor: pointer;
}


// CODE

html, body {
  height: 100%;
  width: 100%;
  background-color: #e9eaed;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

////////////////////////////////

.activities-grid {
  //width: 100%;
  margin-left: @external-margin;
  //margin-top: @external-margin;
  margin-right: @external-margin;

  // flex container properties
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: stretch;

  .activity-card {
    background: white;
    .clickable;
    margin: @card-margin;

    // flex item properties
    flex-grow: 0;
    flex-shrink: 0;
    //flex-basis: 0;

    .mui-paper-container {
      position: relative;

      .card-svg {
        position: absolute;
      }

      .card-name {
        // flex container properties
        height: 100%;
        width: 100%;
        position: absolute;
        //display: flex;
        //flex-direction: row;
        //flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        display: table;
        text-align: center;

        .card-text {
          display: table-cell;
          vertical-align: middle;
        }

        span {
          font-size: 2em;
          font-weight: 300;
          display: block;
          line-height: 1.2em;
          padding: 10px;

          // flex item properties
          //flex-grow: 0;
          //flex-shrink: 0;
          //flex-basis: main-size;
        }
      }
    }



  }
}

.footer {
  // flex container properties
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;

  .logout-button {
    width: 15%;
    // flex item properties
    flex-grow: 0;
    flex-shrink: 0;
    //flex-basis: 50px;

  }
}

////////////////////////////////

.channel {
  // aspect ratio: 10:7.23
  width: 100%;
  height: 0;
  padding-bottom: 72.30%;
  position: relative;
  background: white;
  margin-bottom: 20px;
  .channel-div {
    width: 100%;
    height: 100%;
    position: absolute;
    .channel-caption {
      width: 100%;
      height: 27%;
      position: absolute;
      bottom: 0;
      background-color: rgba(0,0,0,0.4);
      .icon-name-wrapper {
        width: 100%;
        //height: 100%;
        position: absolute;
        bottom: 10%;
        overflow: auto;
        .channel-icon {
          width: 15%;
          height: 0;
          padding-bottom: 15%;
          margin-left: 2%;
          background-color: white;
          //position: absolute;
          //bottom: 0;
          vertical-align: bottom;
        }
        .name-wrapper {
          //height: 100%;
          width: 83%;
          display: inline-block;
          position: absolute;
          top: 20%;
          .channel-name {
            color: #ffffff;
            font-size: 1.3vw;
            margin: 0 0 4% 3%;
            padding: 0 0 0 0;
            vertical-align: middle;
            @media (min-width: 1025px) and (max-width: 1480px) {
              margin: 0 0 3% 3%;
            }
            @media (max-width: 1024px) {
              margin: 0 0 2% 3%;
            }
            @media (max-width: 900px) {
              margin: 0 0 1% 3%;
            }
          }
          .channel-description {
            color: #ffffff;
            font-size: 0.8vw;
            margin: 0 0 0 3%;
            padding: 0 0 0 0;
            line-height: 0;
          }
        }
      }

    }
  }
}