/*
 * This file is provided for application-specific style rules.
 *
 * By default, Maqetta includes this CSS file within HTML pages
 * authored in Maqetta.
 *
 * This file is typically used to override style rules found in
 * theme CSS files. For example, suppose the theme CSS file has:
 *
 * .claro .dijitButton .dijitButtonNode {
 *		padding:2px 4px 4px 4px;
 * }
 *
 * But for your application suppose you want to tighten the padding
 * for buttons. Then, you might include the following style rule
 * in this file (assuming that you accept Maqetta's default where
 * id "myapp" is present on the BODY element, and assuming
 * that you are using the "claro" theme):
 *
 * #myapp.claro .dijitButton .dijitButtonNode {
 *		padding:1px 3px 3px 3px;
 * }
 *
 * Because of CSS precedence rules (see [1]), the above style rule
 * (which begins with #myapp.claro) will "win the cascade" versus
 * the style rule from the theme CSS file due to the use of the
 * ID select (#myapp), which has higher specificity than the class
 * selectors used throughout the Claro theme.
 *
 * [1] http://www.w3.org/TR/CSS21/cascade.html#cascade
 */
html,body {
	height: 100%;
	width: 100%;
}

#myapp.claro .dijitContentPane{
	overflow:hidden;
}

#myapp.claro div#dijit_layout_BorderContainer_0.dijitBorderContainer div#dijit_layout_ContentPane_1.dijitContentPane span.dijit{
	position: relative!important;
	margin-bottom: -20px!important;
	padding-right:10px;
	float: right!important;
	display: inline!important;
	margin-top: 0px!important;
	top:0!important; bottom:0!important; right:0!important; left:0!important;
	}

#myapp.claro div.dijitContentPane div.dojoxGrid{
	margin-bottom:10px!important;
}

#myapp.claro div#dijit_layout_BorderContainer_0.dijitBorderContainer div#dijit_layout_ContentPane_1.dijitContentPane div#dijit_layout_TabContainer_0.dijitTabContainer div.dijitTabPaneWrapper div#dijit_layout_ContentPane_2.dijitContentPane span#playlistContainer.dijitAccordionContainer div#dijit_layout_ContentPane_10_wrapper.dijitAccordionInnerContainer div.dijitAccordionChildWrapper div#dijit_layout_ContentPane_10.dijitContentPane div#widget_dijit_form_TextBox_1.dijit{
	height:25px;
}

#myapp.claro div#dijit_layout_BorderContainer_0.dijitBorderContainer div#dijit_layout_ContentPane_1.dijitContentPane div#dijit_layout_TabContainer_0.dijitTabContainer div.dijitTabPaneWrapper div#dijit_layout_ContentPane_2.dijitContentPane span#playlistContainer.dijitAccordionContainer div#dijit_layout_ContentPane_10_wrapper.dijitAccordionInnerContainer div.dijitAccordionChildWrapper div#dijit_layout_ContentPane_10.dijitContentPane div#widget_dijit_form_TextBox_1.dijit div.dijitReset{
	margin-top:3px;
	margin-left:3px;
}

#myapp.claro div.dijitAccordionChildWrapper div.dijitContentPane{
	padding:0!important;
	width:100%!important;
}


#myapp.claro table.dojoxGridRowTable tbody tr td.dojoxGridCell{
	padding-left:20px!important;
}

#myapp.claro div#chatInbox, #myapp.claro div#inbox{
	top:0!important;
	left:0!important;
	bottom:0!important;
	right:0!important;
	max-width:100%;
	width:100%!important;
	}

#myapp.claro div#libraryList{
	left:0!important;
	bottom:0!important;
	right:0!important;
}

#myapp.claro div#userContentPane{
	padding:0!important;
}

#myapp.claro .gridxHeaderRow table{
	width:100%!important;
}

.pageOverlay {
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1001;
    display: block;
}

#loadingOverlay {
   height: calc(100% - 48px);
   height: -webkit-calc(100% - 48px);
   width: 100%;
   position: absolute;
   background-color: white;
   top: 48px;
}

.sessionScoreboard #loadingOverlay {
	top: 0;
	height: calc(100% + 20px);
	height: -webkit-calc(100% + 20px);
	width: 100%;
	margin-top: -20px;
	background-color: rgba(255,255,255,0.7);
	border-radius: 5px;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear .5s, opacity .5s linear;
}

.sessionScoreboard #loadingOverlay.active {
	visibility: visible;
	opacity: 1;
	/*transition-delay: 0s;*/
}

.summary #loadingOverlay {
    height: 100%;
    top: 0px;
}

#loadingOverlay .loadingPane {
    float:left;
    height: 100%;
}

#myapp.claro .mainLeftPane {
	width: 25%;
    max-width: 350px;
	background-color: #f5f5f5;
}

#loadingOverlay .loadingPane.middleLoadingPane{
    width: 100%;
    height: 100%;
    background-color: transparent;
    position: absolute;
    left: 0;
}

#loadingOverlay .loadingSquare {
    background: #ed2d49;
    float: left;
    width:18px;
    height:18px;
    opacity:0;

}

#loadingOverlay .loadingSquare1 {
    animation:chess1 2s infinite ease-in-out;
    -webkit-animation:chess1 2s infinite ease-in-out;
    -moz-animation:chess1 2s infinite ease-in-out;


}

#loadingOverlay .loadingSquare2 {
 animation:chess2 2s infinite ease-in-out;
   -webkit-animation:chess2 2s infinite ease-in-out;
   -moz-animation:chess2 2s infinite ease-in-out;

}

#loadingOverlay .loadingSquare3 {
    animation:chess3 2s infinite linear;
    -webkit-animation:chess3 2s infinite ease-in-out;
    -moz-animation:chess3 2s infinite ease-in-out;

}

#loadingOverlay .loadingSquare4 {
    animation:chess4 2s infinite ease-in-out;
    -webkit-animation:chess4 2s infinite ease-in-out;
    -moz-animation:chess4 2s infinite ease-in-out;

}

#loadingOverlay .loadingSquare5 {
    animation:chess5 2s infinite ease-in-out;
    -webkit-animation:chess5 2s infinite ease-in-out;
    -moz-animation:chess5 2s infinite ease-in-out;

}

#loadingOverlay .loadingSquareblank {
    background-color:transparent;
}

#loadingOverlay .loadingRow {
    display:block;
}

#loadingOverlay .loadingImage {
      transform:translate(30px,20px) rotateZ(-30deg) rotateX(30deg) skew(26deg);
     -webkit-transform: translate(30px,20px) rotateZ(-30deg) rotateX(30deg) skew(26deg);
      -moz-transform:  translate(30px,20px) rotateZ(-30deg) rotateX(30deg) skew(26deg);
      width: 60px;
      height:60px;
}

#loadingOverlay .loadingText {
    position: absolute;
    margin-top: 155px;
    margin-left: 25px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #0f485c;
}

.sessionScoreboard #loadingOverlay .loadingText {
	margin-top: 45px;
}

#loadingOverlay .loadingContainer {
    margin-top: calc(20% - 100px);
    margin-left: calc(50% - 64px);
    background: url(app/resources/themes/moblab/icons/moblab_m.png) no-repeat;
    background-size: 153px 152px ;
    background-position: -22px 10px;
    height: 200px;
    width: 200px;
}

#loadingOverlay .loadingContainer.noImage {
    background: transparent;
}

.sessionScoreboard #loadingOverlay .loadingContainer {
	margin-top: 35%;
}

@keyframes chess2 {
    0%{
    transform:translate(-18px,18px) scale(0,0);
    }

  2%{
    transform:translate(-18px,18px) scale(0.4,0.4);
        opacity:1;
    }
    10% {
         transform:scale(1.2,1.2) translate(-18px,18px);
         }

    14% {
         transform:scale(1,1) translate(-18px,18px);
         }
    20% {
         transform:translate(0,0);
         opacity:1;
         }
         90%{
             opacity:1;
             }
                      94%{
          opacity:0;
          }
         }

 @keyframes chess1 {
  0% {
    transform:translate(18px,18px) scale(0,0);
    }
     19% {
    transform:translate(18px,18px) scale(0,0);
    }
      20%{
        transform:translate(18px,18px) scale(0.4,0.4);
        opacity:1;
        }
        30%{
           transform:translate(18px,18px) scale(1.4,1.4);
        }
        34%{
           transform:translate(18px,18px) scale(1,1);
        }
       40%{
           transform:translate(0,0);
           opacity:1;
           }
           90%{
             opacity:1;
             }
                      94%{
          opacity:0;
          }

}
@keyframes chess4 {
  0% {
    transform:translate(18px,-18px) scale(0,0);
    }
     39% {
    transform:translate(18px,-18px) scale(0,0);
    }
      40%{
        transform:translate(18px,-18px) scale(0.4,0.4);
        opacity:1;
        }
        50%{
           transform:translate(18px,-18px) scale(1.4,1.4);
        }
        54%{
           transform:translate(18px,-18px) scale(1,1);
        }
       60%{
           transform:translate(0,0);
           opacity:1;
        }
        90%{
             opacity:1;
             }
                      94%{
          opacity:0;
          }
}
@keyframes chess5 {
  0% {
    transform:translate(-18px,-18px) scale(0,0);
    }
     59% {
    transform:translate(-18px,-18px) scale(0,0);
    }
      60%{
        transform:translate(-18px,-18px) scale(0.4,0.4);
        opacity:1
        }
        70%{
           transform:translate(-18px,-18px) scale(1.4,1.4);
        }
        74%{
           transform:translate(-18px,-18px) scale(1,1);
        }
       80%{
           transform:translate(0,0);
           opacity:1;
        }
        90%{
          opacity:1;
          }
          94%{
          opacity:0;
          }
}

@keyframes chess3 {
  0% {
    transform: scale(0,0);
    }
    78%{
      transform: scale(0,0);
      opacity:1;
    }
   86%{
      transform: scale(3,3);
      opacity:1;
    }
        96%{
      transform: scale(3.2,3.2);
      opacity:1;
    }
            98%{
      transform: scale(0,0);
      opacity:1;
    }


}

#myapp.claro .mainRightPane{
	width: 23%;
    max-width: 300px;
	background-color: #f5f5f5;
    float: right;
}

#userDropDown {
    position: absolute;
    right: 5px;
    top:5px;
    z-Index:999;
}

#midtermFeedbackPanel {
  position: absolute;
  right: 10px;
  bottom: 75px;
  width: 220px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.5);
  background-color: #FFF;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10px;
  letter-spacing: 0.5px;
}

#midtermFeedbackPanel .logo {
  font-family: 'Moblab';
  color: #EE2A49;
  line-height: 40px;
  font-size: 25px;
  background-color: #f2f3f5;
  text-align: center;
  width: 100%;
}

#midtermFeedbackPanel .closeBtn {
  font-family: 'Moblab';

  position: absolute;
  top: 12px;
  right: 12px;
  color: #262626;
  font-size: 8px;
  cursor: pointer;
}

#midtermFeedbackPanel .titleText {
  color: #1a5091;
  margin-top: 10px;
  font-size: 14px;
  font-family: 'Lato';
  font-weight: 700;
  text-align: center;
}

#midtermFeedbackPanel .actionBtn {
  margin: 12px 0 3px;
  line-height: 32px;
  color: #fff;
  cursor: pointer;
  background: #1a5091 0% 0% no-repeat padding-box;
  box-shadow: inset 0px -4px 0px #1020373D;

  border-radius: 8px;
  text-align: center;
  font-family: 'Lato';
  font-weight: 700;
  width: 168px;
  height: 36px;
}

#midtermFeedbackPanel .actionBtn:hover {
  background-color: #3077cf;
}