/** BODY **/

body {
    height: 100%;

    background-repeat: no-repeat;
    background-attachment: fixed;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/** DEFAULTS **/

.greenbox { background-color: #92ac00; }
.bluebox { background-color: #009de0; }
.purplebox { background-color: #443988; }
.pinkbox { background-color: #9f0052; }
.redbox { background-color: #ff2020; }
.yellowbox { background-color: #ffbe00; }

input[type=text], input[type=password], input[type=email] { background: white; border-radius: 0px; }

input::placeholder { color: #1979c0 !important; }
.btn { border-radius: 0px !important; }

.vcc-btn { padding: 7px; padding-left: 14px; padding-right: 14px; color: white; font-size: 14px; background: #009de0; text-align: center; }
.vcc-btn-lg { padding: 10px; padding-left: 18px; padding-right: 18px; color: white; font-size: 20px; background: #009de0; text-align: center; }

.nobackimg { background-image: none !important; }
.logincontainerdansknu { z-index: 10; margin-left: auto; background-image: url(../img/loginflags.png); background-position: center center; background-size: auto 40vh; background-repeat: no-repeat;  text-align: center; margin-right: auto; width: 100%; }
.logincontainervcc { z-index: 10; margin-left: auto; background-image: url(../img/loginflags.png); background-position: center center; background-size: auto 40vh; background-repeat: no-repeat;  text-align: center; margin-right: auto; width: 100%; }
.logincontainereva { z-index: 10; margin-left: auto; background-image: url(../static/img/eva/logo-trans.png); background-position: center top; background-size: auto 25vh; background-repeat: no-repeat;  text-align: center; margin-right: auto; width: 100%; }
.loginwelcome { font-size: 40px; font-weight: bold; margin-top: -20vh; margin-bottom: 18vh; }
.logincontainereva .loginwelcome { display: none; }
/** HEADER **/

.vcc-header-outer { width: 100%; background-color: rgba(0,0,0,0.2); }
.vcc-header-inner { margin-left: auto; margin-right: auto; max-width: 1150px; height: 100px; }
.vcc-header-innersm { margin-left: auto; margin-right: auto; max-width: 1150px; height: 70px; }
.vcc-header-pin {
    position: fixed; top: 0px; left: 0px; right: 0px;
    z-index: 1000;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.vcc-logo-container { float: right; height: 100%; padding-top: 15px; padding-bottom: 30px; max-width: 300px }
.vcc-logo-container img { height: 100%; border: none; padding-right: 10px; }
.vcc-logo-container a { border: none; text-decoration: none;}

.vcc-login-menu-container { position: absolute; top: 15%; bottom: 15%; left: 320px; right: 320px; overflow: hidden; }
.vcc-login-menu-item { cursor: pointer; color: white; font-size: 25px; display: inline-block; padding-right: 1.5rem; padding-left: 0.5rem; padding-top: 15px; }
.vcc-page-link { color: white; }
.vcc-page-link:hover { color: white; }
.vcc-page-link:active { color: white; }
.vcc-page-link:visited { color: white; }

.vcc-header-inner .navbar { height: 100%; }
#headerNavbar .nav-item { padding-right: 35px;}


/** FOOTER **/

.vcc-footer-outer { background-image: url('../img/bg-body.gif'); background-repeat: repeat; min-height: 200px; padding-top: 20px; padding-bottom: 30px; }
.vcc-footer-outer .col-md-6 { padding-top: 15px; padding-left: 15px; }
.vcc-footer-outer h3 { font-size: 1.0em; }
.vcc-footer-outer .vifinlogo { padding-top: -15px; width: 80%; max-width: 200px; }
.footlogo { vertical-align: baseline; padding-right: 10px; padding-left: 0px;}

.vcc-footer-outer a { color: white; }
.vcc-footer-outer a:hover { color: white; }
.vcc-footer-outer a:visited { color: white; }

/** LOGIN **/

.loginError { background-color: #ff2020; padding: 5px; text-align: center; color: white; margin-top: 10px; margin-bottom: 15px; display: none; }

/** CONTENT **/

.vcc-content-outer { width: 100%; padding-left: 10px; padding-right: 10px;  }
.vcc-content-all { margin-left: auto; margin-right: auto; max-width: 1150px; }
.vcc-content-md { margin-left: auto; margin-right: auto; max-width: 800px; }
.vcc-content-toppin { margin-top: 170px;  }
.vcc-content-topmenupin { margin-top: 172px;  }

.vcc-subheader { position: fixed; top: 100px; width: 100%; overflow: hidden; z-index: 99; }

/** LOGINPAGES **/
.lpageouter { max-width: 1100px; width: 95%; margin-left: auto; margin-right: auto; margin-top: 40px; margin-bottom: 40px; }
.lpagemenu { width: 90%; padding: 15px; background: rgba(51, 51, 102, 0.92); }
.lpagemenu a.active { font-weight: bold !important; }
.lpagemenu ul {padding-left: 20px !important; }
.pricetable td { border: 1px solid white;  padding: 5px; vertical-align: middle; }
/** PROFILE MENU **/

.vcc-profile-container { position: absolute; overflow: hidden; left: 0px; top: 15%; bottom: 15%; width: 50%; max-width: 300px; min-width: 150px; }
.vcc-profile-container img { cursor: pointer; height: 70%;}
.profileinfo { width: 100%; padding-left: 20px; line-height: 110%; overflow: hidden; }

.resetpos { width: 100%; height: 100%; position: relative; }
.fillspace { width: 100%; height: 100%; }

#topmenubox { position: absolute; z-index: 101; top: 100%; width: auto; height: auto; display: none; z-index: 1000; }

.topmenucontent { position: absolute; top: 0px; left: 0px; z-index: 101; padding: 20px;}
.topmenucontentsmall {  width: 300px; }
.topmenucontentlarge {  width: 400px; }

.topmenucontent .menuitem { padding-left: 20px; padding-top: 5px; padding-bottom: 5px; cursor: pointer; }
.topmenucontent .menuspacer { margin-top: 5px; height: 5px; border-top: 1px solid white; width: 100%; }
.topmenucontent .menuheader { padding-top: 5px; padding-bottom: 5px; font-size: 1.2em; font-weight: bold; }
.topmenucontent .menubuttonrow { padding-top: 30px; padding-bottom: 5px;}
.topmenucontent .langitem { padding-left: 20px; padding-top: 5px; padding-bottom: 5px; cursor: pointer; }
.tmbutton { padding: 10px; background: rgba(255,255,255,0.1); cursor: pointer; }
.tmbutton i { font-size: 0.9em; color: #65b1e5; }
.tmbuttonbold { font-weight: bold; }
.topmenucontent .errormsg { padding-top: 5px; display: none; padding-bottom: 5px; margin-top: 10px; margin-bottom: 5px; cursor: pointer; font-size: 0.9em; border-bottom: 1px solid #ff2020; border-top: 1px solid #ff2020; text-align: center; }
.topmenucontent input[type=text], .topmenucontent input[type=password] { font-size: 12px; outline: none; padding: 2px; width: 100%; border-radius: 2px; }
.topmenucontent .menuclose { cursor: pointer; position: absolute; top: 10px; right: 20px; width: 20px; height: 20px; text-align: right; color: white; }

.transbutton { width: auto; display: inline-block; margin: 10px; padding: 10px; font-size: 16px; cursor: pointer; }
.transbutton i { font-size: 0.9em; color: #65b1e5; }
.transbuttonbold { font-weight: bold; }

/** COURSE **/

.coursefrontbox { cursor: pointer; width: 100%; padding: 20px;  }
.coursefrontbox:hover {  }
.coursefronticon { opacity: 0.7; height: 150px; width: 100%; text-align: center; background-position: center center; background-repeat: no-repeat; }
.coursefrontbox:hover .coursefronticon {  opacity: 1; transform: scale(1.05); }
.categoryfronticon { opacity: 0.7; height: 200px; width: 100%; text-align: center; background-position: center center; background-repeat: no-repeat; }
.coursefrontbox:hover .categoryfronticon { opacity: 1; transform: scale(1.05); }

.courseicon { display: inline-block; height: 100%; width: 50px; margin-right: 16px; overflow: hidden; position: relative; border-radius: 50%; cursor: pointer; }
.courseicon .ciimage { position: absolute;  top: 0px; left: 0px; width: 100%; height: 100%;  background-position: center center; background-size: cover; }
.courseiconchapter .ciimage { opacity: 0.4; }
.courseiconactive .ciimage { opacity: 0.7;}
.courseiconchapter:hover .ciimage { opacity: 0.7; }
.courseiconactive:hover .ciimage { opacity: 1;}
.courseicon .citext { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; padding-top: 15%; color: white; font-size: 24px; font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);  }
.boxcontentpage { background: white; }


#footer {
    height: 100%;
    right: 0px; position: absolute; top: 5px;bottom: 0px; left: 0px;
    overflow: hidden;
}

.footernav { text-align: center; display: none; position: absolute; top: 10px; width: 30px; height: 30px; }
.footernavprev { left: 0px; }
.footernavnext { right: 0px; }

.coursetitleouter { position: fixed; top: 180px; left: 0px; width: 100%; height: 70px; overflow: hidden; }
.coursetitleinner { margin-left: auto; height: 100%; margin-right: auto; width: 1150px; max-width: 80%; font-size: 24px; position: relative; }
.coursetitlechapter {  position: absolute; bottom: 10px; right: 0px; text-align: right; font-size: 0.9em;  }
.coursetitlelesson { position: absolute; bottom: 10px; left: 0px;  }

.coursecontentouter { position: fixed; top: 250px; left: 0px; width: 100%; bottom: 60px; overflow: hidden;}
.coursecontentinner {position: relative; margin-left: auto; color: black; margin-right: auto; width: 1150px; max-width: 80%; height: 100%; }
#coursecontent { width: 100%; height: 100%; position: relative; overflow: hidden; }


.courseindexouter { position: fixed; top: 180px; left: 0px; width: 100%; bottom: 20px; overflow: hidden; display: none; }
.courseindexinner { margin-left: auto; height: 100%; margin-right: auto; max-width: 1150px; font-size: 24px; position: relative; overflow-y: auto; }

.navleft { cursor: pointer; position: absolute; left: -70px; width: 60px; top: 30%; }
.navright { cursor: pointer; position: absolute; right: -70px; width: 60px; top: 30%; }
.contentnav img { width: 60px; opacity: 0.35; }
.contentnav:hover img { width: 60px; opacity: 1; }

.bottomouter { position: fixed; bottom: 0px; left: 0px; width: 100%; height: 50px; background: rgba(0,0,0,0.05); overflow: hidden; }
.bottominner { margin-left: auto; margin-right: auto; max-width: 1150px; height: 100%; position: relative;  user-select: none; }

/** INPUT ELEMENTS **/

.vcccheck { display: inline-block; width: 16px; height: 16px; margin-right: 5px; position: relative; cursor: pointer; }
.vcccheck img { width: 100%; height: 100%; }
.vcccheck .vcccheckmark { position: absolute; bottom: 0px; left: 0px; top: -5px; right: -5px; display: none; }

.widgetfeedback { display: none; margin-left: 10px; margin-right: 10px; padding: 6px; border-radius: 5px; background: #b1def5; color: black; }
.widgetfeedback img { padding-left: 10px; padding-right: 10px; height: 14px; }

/** BOOTSTRAP OVERWRITES **/

.btn { border-radius: 10px !important;}
.btn-success { background-color: #39d530 !important; color: white; border: none !important; }
.btn-success:hover { background-color: #39d530 !important; color: white; border: none !important; }
.btn-success:active { background-color: #39d530 !important; color: white; border: none !important; }

.btn-info { background-color: #0cb2e7 !important; color: white; border: none !important; }
.btn-info:hover { background-color: #0cb2e7 !important; color: white; border: none !important; }
.btn-info:active { background-color: #0cb2e7 !important; color: white; border: none !important; }

.ddrestart { background-color: #002144; color: white; }

/** RESPONSIVE RULES **/

.tinyview {display: none;}
.smallview {display: none;}


.textinputstd { border: none; outline: none; background: white; border-bottom: 2px solid #888888; margin-top: 10px; margin-bottom: 5px;}
.textinputbig { border: none; outline: none; background: white; border-bottom: 2px solid #888888; margin-top: 10px; margin-bottom: 5px;}
.textinputsmall { border: none; outline: none; background: white; border-bottom: 2px solid #888888; margin-top: 10px; margin-bottom: 5px;}

.vcc-course-subheader { width: 100%; background: rgba(0,0,0,0.05); overflow: hidden; }
.coursefrontboxtool { background: rgba(13,44,74,0.5); }

@media (max-width: 1275px), (max-height: 900px) {
    #footer { left: 40px; right: 40px;}

}


@media (max-width: 900px), (max-height: 750px) {


    .vcc-header-inner { height: 80px; }
    .vcc-header-innersm { height: 50px; }
    .vcc-logo-container {  padding-top: 5px; padding-bottom: 10px; max-width: 300px; }
    #headerNavbar a { font-size: 22px; }
    .vcc-content-toppin { margin-top: 120px;  }
    .vcc-content-topmenupin { margin-top: 120px;  }
    .vcc-subheader { top: 80px; }
    .courseicon .citext { padding-top: 10%; font-size: 20px; }

    .coursetitleouter { top: 130px; height: 50px; }
    .coursecontentouter { top: 180px; }
    .coursetitlelesson { position: absolute; top: 3px; left: 0px; width: 100%; height: 100%;  overflow: hidden; }
    .courseindexouter { top: 130px;  }
    .boxcontent { padding-left: 50px !important; padding-right: 50px !important; }

    .vcc-profile-container { max-width: 250px; }
    .vcc-login-menu-container { left: 250px; right: 300px; }
    .vcc-login-menu-item { padding-left: 8px; padding-right: 8px; font-size: 20px;}

}

@media (max-width: 900px) {
    .contentnav img { display: none; }
    .footernav { display: block; }
    .coursecontentinner {width: 100%; max-width: 100%; }
}

@media (max-width: 600px), (max-height: 650px) {


    .vcc-header-inner { height: 60px; }
    .vcc-header-inner { height: 50px; }
    #headerNavbar a { font-size: 20px; }
    .vcc-content-toppin { margin-top: 60px;  }
    .vcc-content-topmenupin { margin-top: 80px;  }
    .vcc-subheader { top: 40px; }

    .profileinfosub { display: none; }
    .topmenucontentsmall { width: 100vw; }
    .topmenucontentlarge { width: 100vw; }
    .smallhide { display: none; }
    .smallview { display: block; }

    .coursetitleouter { top: 90px; height: 40px; }
    .coursecontentouter { top: 130px; }
    .coursetitlechapter { display: none; }
    .profileinfo { font-size: 12px; }
    .vcc-profile-container table.fillspace { height: 30px;}
    .vcc-profile-container table.fillspace img { height: 30px; }
    .courseindexouter { top: 130px;}
    .boxcontent { padding-left: 20px !important;; padding-right: 20px !important;; }

    .vcc-logo-container { display: none; }
    .vcc-profile-container { max-width: 200px; }
    .vcc-login-menu-container { left: 200px; right: 0px; }

    .vcc-login-menu-item { padding-left: 6px; padding-right: 6px; font-size: 15px; padding-top: 5px; }
}

@media (max-width: 600px) {
    .progtext {
        display: none;
    }
}

@media (max-width: 350px) {
    .vcc-logo-container {  display: none; }
    .tinyhide { display: none; }
    .tinyview { display: block; }
}


.buildupstructure .ddbuselementdrop  {
     text-align: center; border: 4px solid #6ed0ea; border-radius: 5px; height: 100%;
}

.buildupstructure .ddbuselementdropset  {
    border: none !important; border-radius: 0px; height: 100%;
}

.courseindexinner i.fa {color: white; }
.navcategorytitle { text-align: center; padding-top: 20px; padding-bottom: 40px; font-size: 1.2em; }
.courseicontitle { width: 100%; height: 36px; overflow: hidden; margin-top: 14px; font-size: 1.1em; line-height: 100%; font-weight: bold; }
.sectionlabel { color: #65b1e5; }