/* form  */
.login-box{
  position: relative;
  /* box-shadow: 0px 10px 8px 4px rgba(0, 0, 0, .5); */
  background: lightgrey;
}

/* help-block */
.form-group .help-block {
  position: absolute;
}
.help-block {
  color: #bdbdbd;
  font-size: 12px;
  font-weight: inherit;
}


/* progress bar  */
.progress-title{
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin: 0 0 20px;
}
.progress{
  height: 10px;
  background: #333;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 30px;
  overflow: visible;
}
.progress .progress-bar{
  position: relative;
  -webkit-animation: animate-positive 2s;
  animation: animate-positive 2s;
}
.progress .progress-bar:after{
  content: "";
  display: inline-block;
  width: 5px;
  background: #265da1;
  position: absolute;
  top: -18px;
  bottom: 0px;
  right: -10px;
  z-index: 1;
  transform: rotate(35deg);
}
.progress .progress-value{
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #265da1;
  position: absolute;
  top: -30px;
  right: -62px;
}
@-webkit-keyframes animate-positive{
  0%{ width: 0; }
}
@keyframes animate-positive {
  0%{ width: 0; }
}


/* slider  */
.slidecontainer {
  width: 100%;
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider:hover {
  opacity: 1;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}


/* cost sharing cards  */
.counter {
  padding: 5px 0;
  border-radius: 5px;
  color: #ffffff;
  font-size: 20px;
}
.count-title {
    font-size: 40px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
}
.count-text {
    font-size: 13px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
}
.fa-2x {
    margin: 0 auto;
    float: none;
    display: table;
    color: #fff;
  font-size: 28px;
}   


/* Assessment radio button  */


.funkyradio label {
  width: 100%;
  border-radius: 3px;
  border: 1px solid #D1D3D4;
  font-weight: normal;
}

.funkyradio input[type="radio"]:empty {
  display: none;
}

.funkyradio input[type="radio"]:empty ~ label {
  position: relative;
  line-height: 2.5em;
  text-indent: 3.25em;
  margin-top: 2em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.funkyradio input[type="radio"]:empty ~ label:before{
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: '';
  width: 2.5em;
  background: #D1D3D4;
  border-radius: 3px 0 0 3px;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label {
  color: #888;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before {
  content: '\2714';
  text-indent: .9em;
  color: #C2C2C2;
}

.funkyradio input[type="radio"]:checked ~ label{
  color: #777;
}

.funkyradio input[type="radio"]:checked ~ label:before{
  content: '\2714';
  text-indent: .9em;
  color: #333;
  background-color: #ccc;
}

.funkyradio input[type="radio"]:focus ~ label:before{
  box-shadow: 0 0 0 3px #999;
}

.funkyradio-warning input[type="radio"]:checked ~ label:before{
  color: #fff;
  background-color: #f0ad4e;
}

#disp span {
  margin: 5px 0;
}



span.select2-selection.select2-selection--multiple{
  border: 1px solid #e4eaec;
}
/*.select2-container .select2-selection--single{
  height: 34px !important;
  border: 1px solid #e4eaec !important;
}*/
input#enddate, input#subtotal{
  background-color: #ffffff;
}
#student-count{
  background: linear-gradient(to right, #1287a5 -3%, #39444d 100%);
  box-shadow: 0px 5px 15px -5px #888888;
}
#college-count{
  background: linear-gradient(to right, #2b2b52 0%, #39444d 100%);
  box-shadow: 0px 5px 15px -5px #888888;
}
#guide-count{
  background: linear-gradient(to right, #2c3335 0%, #39444d 100%);
  box-shadow: 0px 5px 15px -5px #888888;
}
#itrack-count{
  background: linear-gradient(to right, #d9232d 0%, #39444d 100%);
  box-shadow: 0px 5px 15px -5px #888888;
}
.party-assessment{
  background-color: #0A79DF;
  color: #ffffff;
}
.question-bank{
  background-color: #d9232d;
  color: #ffffff;
}
.free-assesments:not(:disabled):not(.disabled).active{
  background-color: #01CBC6;
  color: #ffffff;
}

.select2-results__option[aria-selected=true] {
  display: none;
}
/* .select2-results__option[aria-disabled=true] {
  display: none;
} */


.card {
  font-size: 1em;
  overflow: hidden;
  padding: 0;
  border: none;
  border-radius: .28571429rem;
  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}

.card-block {
  font-size: 1em;
  position: relative;
  margin: 0;
  padding: 1em;
  border: none;
  border-top: 1px solid rgba(34, 36, 38, .1);
  box-shadow: none;
}

/* containing element */
#page{
 width: 500px;
 padding: 50px;
 margin: 0 auto;
 background-color: #fff;
 border: 1px solid #333;
}

.text-info1{
  position: relative;
  width: 25%;
  font-size: 20px;
  font-weight: 400;
  padding: 5px 0px 5px 60px;
  margin: 0 9px 30px -45px;
  color: rgb(255, 255, 255);
  background-color: #333;
  /* text-shadow: 0px 1px 2px #bbb; */
  -webkit-box-shadow: 0px 2px 4px #888;
  -moz-box-shadow: 0px 2px 4px #888;
  box-shadow: 0px 2px 4px #888;
}
.text-info1:after{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 0px;
  top: 100%;
  border-width: 5px 10px;
  border-style: solid;
  border-color: #666 #666 transparent transparent;
}
.text-info1:before{
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  right: -2px;
  top: 0px;
  border-color: transparent #fff transparent transparent;
}

/* Radio Button Style  */
.content{
  position:relative;
  border:1px solid #c0c0c0;
  padding:20px 20px 20px 60px;
  height:200px;
  margin-bottom:30px;
}
.content .radio-container {
    position: absolute;
    left: 15px;
    top: 22px
}
.radio-container input[type="radio"] {
  position: fixed;
  top: -9999px;
  left: -9999px;
}
.content:hover{
  /* transform: scale(1.01); */
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  border-radius: 5px;
}
.radio-container label:before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #c0c0c0;
  padding: 15px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 15px;
  border-radius: 10px;
}
.radio-container input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 6px;
  left: 12px;
  width: 10px;
  height: 20px;
  border: solid olivedrab;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}
.bottom-border {
  border-color: #52c5f8;
  border-bottom: 10px solid #52c5f8;
  background-color: #dff3ff;
  color: teal;
  -webkit-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
  -webkit-transition: color 1000ms linear;
  -ms-transition:color 1000ms linear;
  transition: color 1000ms linear;
  /* box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06); */

}

/* Ribbon Style */
.ribbon {
  position: absolute;
  right: -2px;
  top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px; 
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  color: #fff; 
  text-transform: capitalize; 
  text-align: -webkit-center;
  font-weight: bold; line-height: 20px;
  /* transform: rotate(45deg); */
  width: 100px; 
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 10px; right: -15px;
}
.ribbon span::before {
  content: '';
  position: absolute; 
  left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #79A70A;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
.ribbon span::after {
  content: '';
  position: absolute; 
  right: 0%; top: 100%;
  z-index: -1;
  border-right: 3px solid #79A70A;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
.blue span {background: linear-gradient(#2989d8 0%, #1e5799 100%);}
.blue span::before {border-left-color: #1e5799; border-top-color: #1e5799;}
.blue span::after {border-right-color: #1e5799; border-top-color: #1e5799;}




.card{
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
  transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  padding: 0px 0px 15px 70px;
  cursor: default;
  border-color: blue;

}
.card:hover{
  transform: scale(1.02);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  /* border-radius: 10px; */
}
.card h4{
  font-weight: 600;
}
.card img{
  position: absolute;
  top: 20px;
  right: 15px;
  max-height: 120px;
}
 .card-1{
  background-image: url(../pix/1.png);
  background-repeat: no-repeat;
  background-position: inherit;
  background-size: 65px;
} 
.card-2{
    background-image: url(../pix/2.png);
    background-repeat: no-repeat;
    background-position: inherit;
    background-size: 65px;
}
.card-3{
    background-image: url(../pix/3.png);
    background-repeat: no-repeat;
    background-position: inherit;
    background-size: 65px;
}
@media only screen and (max-width: 768px) {
  .text-info1 {
    position: relative;
    width: 90%;
    font-size: 16px;
    margin-left: -10px;
   }
  .page-header {
    padding: 15px 10px !important;
   }
  .page-content{
    padding: 15px !important;
  }
  body#page-local-cloudlabcourse-create_lab .card-block {
    padding: 0px 10px;
  }
  .step1-data{
    padding: 5px;
  }
  .card{
    padding: 100px 5px 15px 5px;
    margin: 0px !important;
  }
  .row.kpx_row-sm-offset-3.kpx_socialButtons {
    overflow: scroll;
   }
   body#page-local-cloudlabcourse-create_lab .step1-data{
    padding: 0px;
   }
   .backdrop{
    height: 35px !important;
   }
   body#page-user-profile li.site-menu-item.back-to-course.college-logo-li {
    margin-top: -47px !important;
  }
  body#page-user-profile ul.site-menu.scrollable-content {
    margin-top: 75px !important;
}
}
@media(max-width: 990px){
  .card{
    margin: 20px;
  }
} 


.card-input-element:checked + .card-input {
   box-shadow: 0 0 1px 1px #2ecc71;
}

.form-group.secction-preview {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 3px;
}
.kpx_login .kpx_authTitle {
    text-align: center;
    line-height: 300%;
}
    
.kpx_login .kpx_socialButtons a {
    color: white; // In yourUse @body-bg 
  opacity:0.9;
}
.kpx_login .kpx_socialButtons a:hover {
    color: white;
  opacity:1;      
}

.kpx_login .kpx_socialButtons .kpx_btn-facebook {background: #3b5998; -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-facebook:hover {background: #172d5e}
.kpx_login .kpx_socialButtons .kpx_btn-facebook:focus {background: #fff; color:#3b5998; border-color: #3b5998;}

.kpx_login .kpx_socialButtons .kpx_btn-twitter {background: #00aced; -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-twitter:hover {background: #043d52}
.kpx_login .kpx_socialButtons .kpx_btn-twitter:focus {background: #fff; color:#00aced; border-color: #00aced;}

.kpx_login .kpx_socialButtons .kpx_btn-google-plus {background: #c32f10; -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-google-plus:hover {background: #6b1301}
.kpx_login .kpx_socialButtons .kpx_btn-google-plus:focus {background: #fff; color: #c32f10; border-color: #c32f10}

.kpx_login .kpx_socialButtons .kpx_btn-soundcloud {background: #ff8800; -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-soundcloud:hover {background: #c73e04}
.kpx_login .kpx_socialButtons .kpx_btn-soundcloud:focus {background: #fff; color: #ff8800; border-color:#ff8800}

.kpx_login .kpx_socialButtons .kpx_btn-github {background: #666666; -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-github:hover {background: #333333}
.kpx_login .kpx_socialButtons .kpx_btn-github:focus {background: #fff; color : #666666; border-color: #666666}

.kpx_login .kpx_socialButtons .kpx_btn-steam {background: #878787; -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-steam:hover {background: #292929}
.kpx_login .kpx_socialButtons .kpx_btn-steam:focus {background: #fff; color : #878787; border-color: #878787}

.kpx_login .kpx_socialButtons .kpx_btn-pinterest {background: #cc2127; -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-pinterest:hover {background: #780004}
.kpx_login .kpx_socialButtons .kpx_btn-pinterest:focus {background: #fff; color: #cc2127; border-color: #cc2127}

.kpx_login .kpx_socialButtons .kpx_btn-vimeo {background: #1ab7ea; -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-vimeo:hover {background: #162221}
.kpx_login .kpx_socialButtons .kpx_btn-vimeo:focus {background: #fff; color: #1ab7ea;border-color: #1ab7ea}

.kpx_login .kpx_socialButtons .kpx_btn-lastfm {background: #c3000d; -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-lastfm:hover {background: #5e0208}
.kpx_login .kpx_socialButtons .kpx_btn-lastfm:focus {background: #fff; color: #c3000d; border-color: #c3000d}

.kpx_login .kpx_socialButtons .kpx_btn-yahoo {background: #400191; -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-yahoo:hover {background: #230052}
.kpx_login .kpx_socialButtons .kpx_btn-yahoo:focus {background: #fff; color: #400191; border-color: #400191}

.kpx_login .kpx_socialButtons .kpx_btn-vk {background: #45668e; -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-vk:hover {background: #1a3352}
.kpx_login .kpx_socialButtons .kpx_btn-vk:focus {background: #fff; color: #45668e; border-color: #45668e}

.kpx_login .kpx_socialButtons .kpx_btn-spotify {background: #7ab800; -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-spotify:hover {background: #3a5700}
.kpx_login .kpx_socialButtons .kpx_btn-spotify:focus {background: #fff; color: #7ab800; border-color: #7ab800}

.kpx_login .kpx_socialButtons .kpx_btn-linkedin {background: #0976b4; -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-linkedin:hover {background: #004269}
.kpx_login .kpx_socialButtons .kpx_btn-linkedin:focus {background: #fff; color: #0976b4; border-color: #0976b4}

.kpx_login .kpx_socialButtons .kpx_btn-stumbleupon {background: #eb4924; -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-stumbleupon:hover {background: #943019}
.kpx_login .kpx_socialButtons .kpx_btn-stumbleupon:focus {background: #fff; color: #eb4924; border-color: #eb4924}

.kpx_login .kpx_socialButtons .kpx_btn-tumblr {background: #35465c; -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;}
.kpx_login .kpx_socialButtons .kpx_btn-tumblr:hover {background: #142030}
.kpx_login .kpx_socialButtons .kpx_btn-tumblr:focus {background: #fff; color: #35465c; border-color: #35465c}


.kpx_login .kpx_loginOr {
  position: relative;
  font-size: 1.5em;
  color: #aaa;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.kpx_login .kpx_loginOr .kpx_hrOr {
  background-color: #cdcdcd;
  height: 1px;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
.kpx_login .kpx_loginOr .kpx_spanOr {
  display: block;
  position: absolute;
  left: 50%;
  top: -0.6em;
  margin-left: -1.5em;
  background-color: white;
  width: 3em;
  text-align: center;
}     

.kpx_login .kpx_loginForm .input-group.i {
  width: 2em;
}
.kpx_login .kpx_loginForm  .help-block {
    color: red;
}

  
@media (min-width: 768px) {
    .kpx_login .kpx_forgotPwd {
        text-align: right;
    margin-top:10px;
  }   
}
img.picons {
    width: auto;
    height: 65px;
}
.matlab{
  background-color: #e9ecef!important;
}
.matlab img.picons {
    width: 100%!important;
}
.python{
  background-color: #ffc107!important;
}
.java{
  background-color: #afc2c5!important;
}
.r{
  background-color: #343a40!important; 
}
.r img.picons {
    width: 45%!important;
}
.typescript img.picons {
    width: 100%!important;
}

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}


.backdrop{
  background-repeat: no-repeat!important;
  background-size: 50% 100%!important;
  background-position: center!important;
  width: 100%;
  height: 93px;
}
.cdrop{
  background-image: url(../pix/C.png)!important;
}
.cppdrop{
  background-image: url(../pix/C++.png)!important;
  background-size: 40% 80%!important;
}
.javadrop{
  background-image: url(../pix/JAVA.png)!important;
  background-color: #21292e!important;
}
.sqldrop{
  background-image: url(../pix/SQL.png)!important;
}
.chashdrop{
  background-image: url(../pix/CHASH.png)!important;
}
.htmldrop{
  background-image: url(../pix/HTML.png)!important;
}
.javascriptdrop{
  background-image: url(../pix/JAVASCRIPT.png)!important;
}
.phpdrop{
  background-image: url(../pix/PHP.png)!important;
}
.pythondrop{
  background-color:#ffc107!important; 
  background-image: url(../pix/PYTHON.png)!important;
}
.perldrop{
  background-image: url(../pix/PERL.png)!important;
}
.typescriptdrop{
  background-color: #a2cfff!important;
  background-image: url(../pix/TS.png)!important;
  background-size: 100% 70%!important;
}
.rpdrop{
  background-color: #211e27!important;
  background-image: url(../pix/R.png)!important;
  background-size: 40% 80%!important;
}
.rubydrop{
  background-image: url(../pix/RUBY.png)!important;
}
.scaladrop{
  background-color: #abb4bf!important;
  background-image: url(../pix/SCALA.png)!important;
  background-size: 80% 80%!important;
}
.shelldrop{
  background-image: url(../pix/SHELL.png)!important;
  background-size: 80% 80%!important;
}
.matlabdrop{
  background-color: #e4eaec!important;
  background-image: url(../pix/MATLAB.png)!important;
  background-size: 100% 100%!important;
}
.vhdldrop{
  background-image: url(../pix/VHDL.png)!important;
  background-size: 35% 70%!important;
}
/* <-- for virtual labs --> */
.vmrdrop{
  background-image: url(../pix/R.png)!important;
  background-size: 35% 70%!important;
}
.j2eedrop{
  background-image: url(../pix/J2EE.png)!important;
  background-size: 55% 70%!important;
  background-color:#ffc107!important;
}
.vmcentosdrop{
  background-image: url(../pix/CENTOS.png)!important;
  background-size: 60% 90%!important;
  background-color: #d9232d!important;
}
.vmopenstackdrop{
  background-image: url(../pix/OPENSTACK.png)!important;
  background-size: 35% 70%!important;
  background-color:#ffc18e!important;
}
.vmhadoopdrop{
  background-image: url(../pix/HADOOP.png)!important;
  background-size: 60% 100%!important;
}
.selectedlab{
    border: 1px solid #6c757d;
    box-shadow: 5px 5px #88888B;
    background-color: #fff!important;
}


/* common */
.ribbon {
  width: 120px;
  height: 90px;
  overflow: hidden;
  position: absolute;
  transition: all 0.5s ease-in-out;
  webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 5px 0;
  background-color: #3498db;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 13px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}

/* top left*/
.ribbon-top-left {
  top: 0px;
  left: 15px;
}

.ribbon-top-left span {
  right: -20px;
  top: 20px;
  transform: rotate(-45deg);
}
p.labdesc {
    text-align: justify;
    /* display: initial; */
    padding: 5px;
}