html, body, input, select, button, textarea, text { font: 14px 'Open Sans', Arial, Sans-Serif; color: #333; }

html, body { width: 100%; height: 100%; }

.scrollable { overflow: auto; -webkit-box-flex: 1; -webkit-overflow-scrolling: touch; }


a { color: #1abc9c; }

.assignment-bar { background: #fafafa; text-align: center; padding-top: 12px; height: 40px; }
.main { display: table; width: 100%; min-height: calc(100% - 40px); background: linear-gradient(180deg, #fff 0%, #fafafa 100%); }
.main-content { display: table-cell; vertical-align: middle; text-align: center; background: url('../images/bg-pattern.svg') no-repeat center; background-size: cover; padding: 40px 0; }

.main-content .title { font-size: 2.8em; padding: 0 10%; max-width: 820px; margin: 0 auto; margin-bottom: 40px; line-height: 120%; }
.main-content .title.mini {  font-size: 2em; margin-bottom: 0; }
@media (max-width: 450px) {
    .main-content .title { font-size: 1.9em; padding: 0 5%; }
}


.main-content .image { max-width: 300px; width: 70%; margin-bottom: 20px; }
.main-content .cta-button { color: #fff; border-radius: 5px; padding: 18px 36px; border: 0; font-size: 1.2em; background-color: #1abc9c; background-image: linear-gradient(to right, #1abc9c, #1ed4b0); box-shadow: 0 14px 24px 0 rgba(26,188,156,0.25); }
.main-content .label-details { margin-top: 30px; font-size: 0.9em; color: #666; }
.main-content .label-details a { text-decoration: underline; }


@keyframes elastic1 { 0% { transform: scale(0.9); } 50% { transform: scale(1.1); } 100% { transform: scale(0.9); } }
@keyframes elastic2 { 0% { transform: scale(1.1); } 50% { transform: scale(0.9); } 100% { transform: scale(1.1); } }

@keyframes jackInTheBox {
    from { opacity: 0; transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; }
    50% { transform: rotate(-10deg); transform: rotate(-10deg); }
    70% { transform: rotate(3deg); transform: rotate(3deg); }
    to { opacity: 1; transform: scale(1); transform: scale(1); }
}
  
@keyframes bounceOut {
    20% { transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
    50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
    to { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); }
}
  
@keyframes swing {
    20% { transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); }
    40% { transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); }
    60% { transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); }
    80% { transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); }
    to { transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); }
}

#initial-loading { position: fixed; width: 100%; height: 100%; bottom: 0; left: 0; vertical-align: middle; text-align: center; background: #fff; }
#initial-loading.closed { opacity: 0; bottom: 100%; transition: opacity 0.1s linear, bottom 0.5s cubic-bezier(1,0,1,0); }
#initial-loading:before { content: ''; display: inline-block; vertical-align: middle; width: 1px; height: 100%; }
#initial-loading .loading-container { display: inline-block; vertical-align: middle; width: 150px; height: 150px; position: relative; }
#initial-loading .loading-container .device { position: absolute; background: url('../images/ipad.svg') no-repeat center; background-size: contain; width: 50%; height: 50%; left: 25%; top: 25%; animation-name: jackInTheBox; animation-duration: 1s; animation-iteration-count: 1; }
#initial-loading .loading-container .device.close { animation-name: bounceOut; animation-duration: 0.5s; animation-iteration-count: 1; }
#initial-loading .loading-container .circle { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 100%; background-color: #1abc9c; opacity: 0.15; animation-duration: 2s; animation-iteration-count: infinite; }
#initial-loading .loading-container .circle.circle1 { animation-name: elastic1; }
#initial-loading .loading-container .circle.circle2 { animation-name: elastic2; }
#initial-loading .loading-container .bar { width: 20%; position: absolute; left: 40%; top: 63%; height: 4px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
#initial-loading .loading-container .bar>.bar-progress { height: 100%; width: 0%; background: #1abc9c; }
#initial-loading .loading-container .image { position: absolute; width: 100%; height: 100%; background: url('../images/graduation-hat.svg') no-repeat center; background-size: 40%; animation-name: swing; animation-duration: 1s; animation-iteration-count: infinite; }
#initial-loading .message { position: absolute; top: 100%; margin-top: 30px; text-align: center; line-height: 150%; width: 200%; left: -50%; color: #888; }
#initial-loading .message b { color: #333 !important; }


.text-emphasis { font-size: 1.1em; text-align: center; padding: 20px 10%; }

.profile-list { }
.profile-list .profile { padding: 15px 10px; }
.profile-list .profile:not(:last-child) { border-bottom: 1px solid #f7f7f7; }
.profile-list .profile .profile-icon { float: left; width: 40px; height: 40px; margin-right: 10px; position: relative; }
.profile-list .profile.status-ok .profile-icon:after { content: ''; position: absolute; width: 12px; height: 12px; display: block; background: #1abc9c; top: 30px; left: 30px; border-radius: 100px; }
.profile-list .profile.status-nok .profile-icon:after { content: ''; position: absolute; width: 12px; height: 12px; display: block; background: #efdb66; top: 30px; left: 30px; border-radius: 100px; }
.profile-list .profile .profile-icon>img { width: 100%; }
.profile-list .profile .profile-name { font-weight: bold; }
.profile-list .profile .profile-description { color: #888; font-size: 0.9em; }



.profile-info { padding: 15px 10px; }
.profile-info .profile-icon { text-align: center; margin-bottom: 20px; }
.profile-info .profile-icon>img { height: 80px; }
.profile-info .profile-name { text-align: center; font-size: 1.2em; font-weight: bold; }
.profile-info .profile-description { text-align: center; color: #888; margin-bottom: 20px; }
.profile-info .profile-description:after { content: ''; width: 50%; height: 1px; background: #f7f7f7; display: block; margin: 0 auto; margin-top: 20px; }
.profile-info .profile-details { color: #888; line-height: 150%; }
.profile-info .profile-details b { color: #333 !important; }