/* CSS file for the Leadership Institute's Canvas LMS

https://leadershipinstitute.instructure.com/

*/

/* Start Branding 2021 */


.ic-Label {
	font-size:1.2rem;
}
			
.ic-Login-header__logo {
	flex: 0 0 100%;
}

.ic-Login-header__logo img{
	width:60%;
	max-width:300px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top:1vh;
	margin-bottom:1vh;
}
 
.ic-Login__content{
	border:1px solid #0585AC;
	background-color:rgba(255,255,255,0.6);
}
.ic-Login-header, .ic-Login__sso-list__item, #LIHelpInfoButton, #LIHelpInfo{
	background-color:#ffffff !important;
	
	color:#00000 !important;
}

.ic-Login-header, #LIHelpInfoButton, #LIHelpInfo{
	border:1px solid #0585AC !important;
} 

.ic-Form-control.ic-Form-control--login{
	border-left:1px solid #0585AC !important;
	border-right:1px solid #0585AC !important;
}

.ic-Form-control.ic-Form-control--login:nth-child(2){
	border-left:none !important;
	border-right:none !important;
}

.ic-Login__actions{
	border-left:1px solid #0585AC !important;
	border-right:1px solid #0585AC !important;
	border-bottom:1px solid #0585AC !important;
}

#forgot_password_instructions{
	background-color:#ffffff !important;
	border-top:1px solid #0585AC !important;
	border-left:1px solid #0585AC !important;
	border-right:1px solid #0585AC !important;
	padding-left:.5vw !important;
	padding-right:.5vw !important;
} 

 #forgot_password_form .ic-Login__actions, #ic-Login__body.ic-Login__actions{
	border:none !important;
}

#forgot_password_form .ic-Form-control.ic-Form-control--login:nth-of-type(2){
		border-bottom:1px solid #0585AC !important;
}



#LIHelpInfoTitle, #LIHelpInfo, .ic-Login{
	color:#000000!important;
}

#LIHelpInfo
{
	padding:5px;
	margin-bottom:10px;
}

.ic-Login {
    min-height: calc(99.9vh - 60px);
}

.ic-Login .LILowerLogo{
    color:#ffffff;
}

.ic-Login__sso-list__item{
		width:calc(100% - 1vw);
}

.ic-Login__sso-list__item a{
		width:100%;
		padding-top:10px;
}

.ic-Login__sso-button{
	width:100%;
}

.ic-Login__sso-button__title{
		color:#000000;
		padding:0;
		
}

.Button.ic-Login__sso-button{
		padding:0;
}

.ic-Login-header, .ic-Login__content, .ic-Login__innerContent{
		padding:0;
}

.ic-Login__container{
		padding:0;
}

.ic-Login__sso-list{
	border:0; 
	margin:0;
	padding:0;
	width:100%;
	color:#000000;
}

ul.ic-Login__sso-list{
	border:1px solid #0585AC;
	box-sizing:border-box; 
}

#login_form ul{
	margin:0;
	padding:0;
}

#CLICKHEREBUTTON{
		width:100%;
		max-width:160px; 
		margin-top:10px;
}

.LIExtLogin{
		font-size:1rem !important;
		color:#000000 !important;
		font-weight:normal !important;
		cursor:pointer;
}

.ic-Form-control--login .ic-Label, .ic-Login__link {
    color:#000000 !important;
}

#forgot_password_instructions{
	color:#000000 !important;
}

.ic-Form-control, .ic-Login__actions {
	background: #ffffff;
}

.ic-Form-control .ic-Input{
	width:calc(100% - 1vw) !important;
}

.ic-Login__actions .ic-Login__actions-timeout label{
		color:#000000 !important;
}

.ic-Form-control, .ic-Login__actions, .ic-Login__sso-list__item{
    margin-bottom: 0px !important;
	padding: .5vw !important;
}

.ic-Label {
    font-size:1rem !important;
}

.ic-Login__actions .Button--login {
    padding: 6px 36px;
    background: #1078B2;
    color: #ffffff;
    border-radius: 20px;
    overflow: visible;
}


/* Start ipad Branding 2021 */

#f1_container{
	background-color:#3583a8;

}

#f1_card{
	border:1px solid #e67f3b;
	background-color:rgba(255,255,255,0.6);
}

#f1_container .Button--primary, #f1_container .LIHelpInfoButton{
	width:100%;
	box-sizing: border-box !important;
}

#f1_container .ic-Label{

}

#LIHelpInfoButton{
		padding:0px 8px;
		color:#000000;
		font-size:1rem; 
		width:100%;
		display:block;
		box-sizing: border-box !important;
}

#f1_container .btn-primary, #f1_container .Button--primary{
	background-color:#ffffff;
	color:#000000;
}

#LIHelpInfoTitle strong, #f1_container .ic-Label{
	color:#000000 !important;
}


/* End Branding 2021 */

/* Home page for touch devices like ipad*/

.touch {

}
.mobileLogin-Header {
	/* background-image: url("https://instructure-uploads-apse2.s3.ap-southeast-2.amazonaws.com/account_135590000000000001/attachments/31696/DOE_Logo_Off_White.png"); */
	background-image: url("https://instructure-uploads-apse2.s3.ap-southeast-2.amazonaws.com/account_135590000000000001/attachments/57919/Canvas_Leadership_Instittue.svg");
	background-repeat: no-repeat;
  	background-size: 80% auto;
  	background-position:center center;
}


.tool_content_wrapper.custom_height[style] {
    height: auto !important;
    min-height: calc(100vh - 250px);
}


iframe.tool_launch {
    min-height: calc(100vh - 400px);
    /*width: 100%;
    height: 100%;
    border: none;
    max-width: 100%;*/
}

.LITile {
  /* delete this later */
  font-family: "Open Sans",Arial,Helvetica,Verdana,sans-serif;
  border: 1px solid #FCFCFC;
  min-height: 10vw;
  box-shadow: 0.3vw 0.3vw 1vw rgba(0, 0, 0, 0.1);
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 1vw; }
  .LITile:hover {
    box-shadow: 0.3vw 0.3vw 1vw rgba(0, 0, 0, 0.3);
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.3); }
  .LITile a {
    text-decoration: none; }
  .LITile img {
    width: 100%;
    height: auto; }
  .LITile h2 {
    width: 100%;
    background-color: #fdfdfd;
    margin: 0px;
    padding: 8px 0px 3px 0px;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    color: #007b84; }
  .LITile p {
    text-align: left;
    font-size: 14px;
    color: #333;
    padding: .2vw .5vw .2vw .5vw;
    margin: 0; }
  .LITile li {
    font-size: 14px;
    }
.LITile a,.LITile h2 a,.LITile p a{
	text-decoration: none !important; 
}
.LITile h2 a{
	color:#007b84 !important; 
}
.LITile p a{
	color:#333333 !important; 
}
.LITile .NotAvailable {
	display:block;
	position: absolute;
	z-index: 1;
	float:left;
	font-size:140%;
	box-sizing: border-box;
	padding:2px 4px 2px 4px;
	background-color:#007B84;
	color:#fff;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
}
.LITile table{
    width:100%;
}
.user_content iframe{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0vw !important;
}
.user_content iframe.shadow{
	border: 1px solid #FCFCFC !important;
    box-shadow: 0.3vw 0.3vw 1vw rgba(0, 0, 0, 0.1) !important;
}
.player_border{
		background-color:rgba(0, 0, 0 , 0) !important;
}
/* Code for PrepDL2020 */

.Xcontext-course_115 p, .Xcontext-course_115 li{
	font-size: calc(.8vw + .8vh) !important;
	max-width: 1000px !important;
}
.Xcontext-course_115 table:not([cellpadding]) td{
	padding-left:5px !important;
}

.LI_Section, .LI_SectionOutput{
    display: block;
    clear:both;
    box-sizing: border-box;
    width:100%;
    padding:0 1vw .5vw 1vw;
    margin:20px 0 1vw 0;
    border:1px solid #347A91;
    border-radius: 1vw;
}
.LI_Section p:first-of-type, .LI_SectionOutput p:first-of-type{
    margin-top:30px;
}
.LI_SectionIcon{
    display: block;
    font-size: 130%;
    font-weight: bold;
    clear:both;
    box-sizing: border-box;
    width:40vw;
    max-width:300px;
    height:40px;
    padding:5px 5px 5px 50px;
    margin:0;
    margin-bottom:-20px;
    border:1px solid white;
    position: relative;
    top:20px;
    left:0px;
    background-color: #fff;
    text-align: left;
    /*background-image:url(https://leadershipinstitute.test.instructure.com/courses/115/files/15181/preview);*/
    background-size: 40px 40px;
    background-position: left;
    background-repeat: no-repeat;
}

.LI_SectionGenerator {
    display: block;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 0 1vw .5vw 1vw;
    margin: 20px 0 1vw 0;
    border: 1px solid #347A91;
    border-radius: 1vw;
}

.LI_SquareMenu, .LI_RoundedMenu{
	border:none !important;
}

.LI_SquareMenu ul, .LI_RoundedMenu ul{
	list-style:none;
	margin:0;
}

.LI_SquareMenu ul li{
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='100%'><rect class='LISquare' width='40' height='100%' style='fill:rgb(52,122,145);'/></svg>");
	background-position:left top;
	margin-bottom: 2px;
}
.LI_RoundedMenu ul li{
	min-height:40px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle class='LICircle' cx='20' cy='20' r='15' style='fill:rgb(52,122,145);'/></svg>");	
	background-position:left center;
}
.LI_SquareMenu ul li, .LI_RoundedMenu ul li{
    
	background-repeat:no-repeat;
    padding: 0px 0 3px 50px;
}
	
.LI_Circle {
display:inline-block;
font-weight:bold;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 25px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: rgb(52,122,145);
  margin-top:-15px;
}

.LIAccordion, .LIAccordion td, .LIAccordion tbody, .LIAccordion tr{
    width:100%;
    margin-left: 0px;
}
.LIAccordionHead{
    width:100%;
	padding:5px;
	cursor:pointer;
    border:1px solid #C7CDD1;;
    margin-top:6px;
    margin-bottom:6px;
    background-color:#f5f5f5;
    color:#2D3B45;
}
.LIAccordionHead:hover{
    background: #e8e8e8;
    color: #2D3B4
}
.LIAccordionHead:first-of-type{
    margin-top:0px;
}
.LIAccordionCont{
    width:100%;
	padding-left:5px;
	padding-right:5px;
	margin-top:-7px;
    border:1px solid #000;
}
.LIAccordionHead.active{
	background-image:linear-gradient(to bottom, #4C76A6, #3B5B80);
	cursor:default;
    border:1px solid #000;
    color:#fff;
}
.LIAccordionHead .LIArrowIcon {
  max-width: 0; 
  max-height: 0; 
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #2D3B45;
    border-right:none;
    position: relative;
    margin-right:10px;
    display: inline-block;
    top:-2px;
}

.LIAccordionHead.active .LIArrowIcon {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
    border-bottom:none;
    position: relative;
    margin-right:10px;
    display: inline-block;
    top:-5px;
}

.LIAccordionHead h3{
    display: inline-block;
}


.LIAccordionHead .ui-icon{
		display:inline-block;
}

/* Leadership Institute default horizontal rule sections */
.LI_HRIcon_Wrapper{
		text-align: center;
}
.LI_HRIcon_Left,.LI_HRIcon_Right{
		display: inline-block;
		width: calc(26vw - 26px);
		height:25px;
		border-bottom:solid 1px #4C76A6;
		padding:0;
		margin:0 0 25px 0;
}
.LI_HRIcon_Circle{
		display: inline-block;
		width:50px;
		height:50px;
		background-color: #ffffff;
		background-size: 80% 80%;
		border-radius: 25px;
		background-position: center;
		background-repeat: no-repeat;
		border:1px solid #4C76A6;
		margin:0 auto 0 auto;
		overflow:visible;
}
.LI_Blur0{
	filter: blur(0px);
}
.LI_Blur1{
	filter: blur(1px);
}
.LI_Blur2{
	filter: blur(2px);
}
.LI_Blur3{
	filter: blur(3px);
}
.LI_Blur4{
	filter: blur(4px);
}
.LI_Blur5{
	filter: blur(5px);
}
.LI_Blur6{
	filter: blur(6px);
}
.LI_Blur7{
	filter: blur(7px);
}
.LI_Blur8{
	filter: blur(8px);
}
.LI_Blur9{
	filter: blur(9px);
}
.LI_Blur10{
	filter: blur(10px);
}
.LI_BackgroundContain{
	background-size: contain;
	/*Resize the background image to make sure the image is fully visible*/
}
.LI_BackgroundCover{
	background-size: cover;
	/*Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges*/
}
.LI_Rounded0{
	border-radius: 0vw;
}
.LI_Rounded1{
	border-radius: 1vw;
}
.LI_Rounded2{
	border-radius: 2vw;
}
.LI_Rounded3{
	border-radius: 3vw;
}
.LI_Rounded4{
	border-radius: 4vw;
}
.LI_Rounded5{
	border-radius: 5vw;
}
.LI_Rounded6{
	border-radius: 6vw;
}
.LI_Rounded7{
	border-radius: 7vw;
}
.LI_Rounded8{
	border-radius: 8vw;
}
.LI_Rounded9{
	border-radius: 9vw;
}
.LI_Rounded10{
	border-radius: 10vw;
}

.LI_FSImage:hover{
		cursor: -moz-zoom-in; 
		cursor: -webkit-zoom-in; 
		cursor: zoom-in;
}
.LI_TextShadowBlack0 { 
text-shadow: 0 1px 5px #000000, 0 1px 25px #000000; 
}
.LI_TextShadowWhite0 { 
text-shadow: 0 1px 5px #ffffff, 0 1px 25px #ffffff; 
}
.LI_TextShadowBlack1 { 
text-shadow: 0 0 3px #000000, 0 0 5px #000000;
}
.LI_TextShadowWhite1 { 
text-shadow: 0 0 3px #ffffff, 0 0 5px #ffffff;
}
.LI_TextShadowBlack2 { 
text-shadow: 2px 2px 4px #000000;
}
.LI_TextShadowWhite2 { 
text-shadow: 2px 2px 4px #ffffff;
}
.LI_TextBorderBlack { 
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
}
.LI_TextBorderWhite { 
text-shadow: -1px 0 #ffffff, 0 1px #ffffff, 1px 0 #ffffff, 0 -1px #ffffff;
}

.LI_Border1LIBlue {
  border: 1px solid #347A91;
}

/* Box shadow */
.LI_Boxshadow1 {
  box-shadow: 0 1px 2px 0px rgb(0 0 0 / 20%), 0 1px 10px rgb(0 0 0 / 10%);
}

.LI_Boxshadow2 {
  box-shadow: 5px 5px 0px 0px rgb(0 0 0 / 20%), 0 0 5px 0px rgb(0 0 0 / 10%);
}

.LI_BoxshadowInset {
  box-shadow: inset 0 0px 2px 0px rgb(0 0 0 / 20%), inset 0 0px 10px rgb(0 0 0 / 20%);
}



/* Table */
.LI_TableGreyBorder {
  border: 1px solid #c7cdd1;
}

.LI_TableStripedLightGrey tbody tr:nth-child(odd) {
  background-color: #f5f5f5;
}

/* Quote
https://codepen.io/Rases/pen/pogVVwp */



.LI_QuoteLIBlue {
  border: none;
  color: #4C76A6;
  background: linear-gradient(to right, #4C76A6 2px, transparent 2px) 0 100%,
              linear-gradient(to left, #4C76A6 2px, transparent 2px) 100% 0,
              linear-gradient(to bottom, #4C76A6 2px, transparent 2px) 100% 0,
              linear-gradient(to top, #4C76A6 2px, transparent 2px) 0 100%;
  background-repeat: no-repeat;
  background-size: 80px 80px;
  padding: 20px 40px;
  margin: 20px;
  position: relative; 
}

.LI_QuoteLIBlue p{
 font-size: calc(.5vw + 12px) !important;
 font-weight: 400 !important;
}

.LI_QuoteLIBlue::before {
    content: open-quote;
    color: #4C76A6;
    font-size: calc(.5vw + 18px) !important;
    position: absolute;
    top: 10px;
    margin-right: -40px;
    right: 100%;
    font-weight: bold !important;
}

.LI_QuoteLIBlue::after {
    content: close-quote;
    color: #4C76A6;
    font-size: calc(.5vw + 18px) !important;
    position: absolute;
    margin-left: -40px;
    left: 100%;
    top: auto;
    bottom: 30px;
   font-weight: bold !important;
}
.ic-Login__sso-button__title--mmicrosoft::after {
	content: "To use Canvas need to update your browser and/or enable javascript";
	background-color: red;
	color: white;
	font-weight: bold;
}

.LI_QuoteLIBlue p:last-child {
  text-align: right;
}


.LI_ListBlue li::marker {
	font-size: 3ch;
    color: #347A91;
}

.LI_ListBlue_Tick li::marker {
  content: '\2714\0020';
}

.LI_Fade_In_1 {
  animation: fadeIn linear 1s;
  -webkit-animation: fadeIn linear 1s;
  -moz-animation: fadeIn linear 1s;
  -o-animation: fadeIn linear 1s;
  -ms-animation: fadeIn linear 1s;
}
.LI_Fade_In_2 {
  animation: fadeIn linear 2s;
  -webkit-animation: fadeIn linear 2s;
  -moz-animation: fadeIn linear 2s;
  -o-animation: fadeIn linear 2s;
  -ms-animation: fadeIn linear 2s;
}
.LI_Fade_In_3 {
  animation: fadeIn linear 3s;
  -webkit-animation: fadeIn linear 3s;
  -moz-animation: fadeIn linear 3s;
  -o-animation: fadeIn linear 3s;
  -ms-animation: fadeIn linear 3s;
}
.LI_Fade_In_4 {
  animation: fadeIn linear 4s;
  -webkit-animation: fadeIn linear 4s;
  -moz-animation: fadeIn linear 4s;
  -o-animation: fadeIn linear 4s;
  -ms-animation: fadeIn linear 4s;
}
.LI_Fade_In_5 {
  animation: fadeIn linear 5s;
  -webkit-animation: fadeIn linear 5s;
  -moz-animation: fadeIn linear 5s;
  -o-animation: fadeIn linear 5s;
  -ms-animation: fadeIn linear 5s;
}
.LI_Fade_In_6 {
  animation: fadeIn linear 6s;
  -webkit-animation: fadeIn linear 6s;
  -moz-animation: fadeIn linear 6s;
  -o-animation: fadeIn linear 6s;
  -ms-animation: fadeIn linear 6s;
}
.LI_Fade_In_7 {
  animation: fadeIn linear 7s;
  -webkit-animation: fadeIn linear 7s;
  -moz-animation: fadeIn linear 7s;
  -o-animation: fadeIn linear 7s;
  -ms-animation: fadeIn linear 7s;
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

.LI_Slide_In_Left_1 {
  animation: slideIn slideIn 1s;
  -webkit-animation: slideIn linear 1s;
  -moz-animation: slideIn linear 1s;
  -o-animation: slideIn linear 1s;
  -ms-animation: slideIn linear 1s;
}
.LI_Slide_In_Left_2 {
  animation: slideIn slideIn 2s;
  -webkit-animation: slideIn linear 2s;
  -moz-animation: slideIn linear 2s;
  -o-animation: slideIn linear 2s;
  -ms-animation: slideIn linear 2s;
}
.LI_Slide_In_Left_3 {
  animation: slideIn slideIn 3s;
  -webkit-animation: slideIn linear 3s;
  -moz-animation: slideIn linear 3s;
  -o-animation: slideIn linear 3s;
  -ms-animation: slideIn linear 3s;
}
.LI_Slide_In_Left_4 {
  animation: slideIn slideIn 4s;
  -webkit-animation: slideIn linear 4s;
  -moz-animation: slideIn linear 4s;
  -o-animation: slideIn linear 4s;
  -ms-animation: slideIn linear 4s;
}
.LI_Slide_In_Left_5 {
  animation: slideIn slideIn 5s;
  -webkit-animation: slideIn linear 5s;
  -moz-animation: slideIn linear 5s;
  -o-animation: slideIn linear 5s;
  -ms-animation: slideIn linear 5s;
}

@keyframes slideIn {
  0% {position:absolute;left:-1000px;}
  100% {position:relative;left:0;}
}

.LI_Jiggle_Hover_1:hover {
  animation: jiggle 1s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes jiggle {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.LI_Rotate_Hover_1:hover {
  animation: LIrotate1 1.0s;
  transform: rotate(0deg);
  transform-origin : center;
}

@keyframes LIrotate1 {
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(-1deg);
  }
  20%, 40%, 60%, 80% {
    transform: rotate(1deg);
  }
}

.LI_Rotate_Hover_2:hover {
  animation: LIrotate2 1.0s;
  transform: rotate(0deg);
  transform-origin : center;
}

@keyframes LIrotate2 {
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(-2deg);
  }
  20%, 40%, 60%, 80% {
    transform: rotate(2deg);
  }
}

.LI_Rotate_Hover_3:hover {
  animation: LIrotate3 1.0s;
  transform: rotate(0deg);
  transform-origin : center;
}

@keyframes LIrotate3 {
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(-3deg);
  }
  20%, 40%, 60%, 80% {
    transform: rotate(3deg);
  }
}

.LI_Rotate_Hover_4:hover {
  animation: LIrotate4 1.0s;
  transform: rotate(0deg);
  transform-origin : center;
}

@keyframes LIrotate3 {
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(-4deg);
  }
  20%, 40%, 60%, 80% {
    transform: rotate(4deg);
  }
}

.LI_Rotate_Hover_5:hover {
  animation: LIrotate5 1.0s;
  transform: rotate(0deg);
  transform-origin : center;
}

@keyframes LIrotate5 {
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(-5deg);
  }
  20%, 40%, 60%, 80% {
    transform: rotate(5deg);
  }
}

.LI_Rotate_Hover_360:hover {
  animation: LIrotate360 1.0s;
  transform: rotate(0deg);
  transform-origin : center;
}

@keyframes LIrotate360 {
  50%{
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}