html, body{margin:0; padding:0; height:fit-content; font-family: Open Sans; font-size:16px; overflow-y:visible; background-color: #f4f4f4}
a{text-decoration:none}
h1{text-align:center; text-transform:uppercase}
.bgsilver{background-color:#f0f0f0}

#body-loader {position:fixed; left:45vw; top:45vh; width:10vw; height:10vh; z-index:50000}

header{display:flex; justify-content:space-between; padding:10px 0; background-color:var(--basemain); border-bottom:1px solid; border-color:var(--bordercolor)}
header > div, header > a{display:flex; align-items:center}
header > a > img{display:block; height:70px}

header > a{justify-content:center; width:75%}
header > div{align-items:center; width:25%}

.button-1-container{margin: 25px}
.button-1{display: flex; justify-content: center; margin-top: 10px; padding: 10px; background-color: var(--primarythin); color: var(--primarydark); border-radius: 25px; font-size: 20px}
.button-1:hover{background-color: var(--primarydark); color: white; transition: 0.3s}

.button-2-container{margin: 25px}
.button-2{display: inline-flex; justify-content: center; margin: 10px; padding: 10px 25px; background-color: var(--primarythin); color: var(--primarydark); border-radius: 25px; font-size: 20px}
.button-2:hover{background-color: var(--primarydark); color: white; transition: 0.3s}
.button-2-selected{background-color: var(--primarydark) !important; color: white !important}

.photoimage{background-color:#ececec}

.header-admin{padding-left:15px; color:white}
.header-exit{padding-left:25px}

.header-lb{margin:0 10px; padding:5px 15px; color:white}
.header-lb:hover{background-color:var(--primarydark); border-radius:5px}

.header-userphoto{display:inline-block; width:45px; height:45px; background-size:contain; background-position:center center; background-repeat:no-repeat; border-radius:50px !important; padding:0 !important; border:2px solid; border-color:white}

.header-menu{position:relative}
.header-menu-icon{display:flex; justify-content:center; align-items:center; margin-right:25px; width:50px; height:50px; border-radius:50%; color:white; font-size:24px}
.header-menu-icon:hover{background-color:var(--primarydark)}

.menu-wrapper{position:absolute; top:60px; left:-250px; z-index:3; width:375px; height:375px; border-radius:15px; background-color:white; -webkit-box-shadow: 4px 9px 13px 20px rgba(34, 60, 80, 0.2); -moz-box-shadow: 4px 9px 13px 20px rgba(34, 60, 80, 0.2); box-shadow: 4px 9px 13px 20px rgba(34, 60, 80, 0.2)}
.menu-wrapper > a{display:inline-block; margin:25px; text-align:center}
.menu-wrapper > a{color:var(--basemain)}
.menu-wrapper > a:hover{color:var(--primarydark)}
.menu-wrapper > a > div:first-of-type{font-size:36px}

.menu-wrapper-visible{display:block; text-align:center}
.menu-wrapper-invisible{display:none}

.visibility-desktop{visibility:visible}
.visibility-mobile{visibility:hidden}

.display-desktop{display:unset !important}
.display-mobile{display:none !important}

@media (max-width:980px) {
 header{padding:10px 25px 10px 0px}
 header > a{justify-content:flex-start; width:unset}
 header > div{width:unset}
 header > a > img{height:35px}
 
 .header-lb{margin:0}
 .header-menu-icon{margin-right:10px}
 .header-menu-icon:hover{background-color:var(--basemain)}
 
 .menu-wrapper{left:-175px; width:325px}
 .menu-wrapper > a{margin:20px}
 .menu-wrapper > a > div:first-of-type{font-size:30px}
 
 .display-desktop{display:unset !important}
 .display-mobile{display:none !important}
}

.signin{position:relative; height:100vh; background-size:cover}
.signin-layout{position:absolute; display:flex; justify-content:center; align-items:center; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background-color:rgba(141,144,227,0.85); filter:contrast(1.5)}
.signin-block{display:flex; width:1060px; height:640px; background-color:white; border-radius:25px; filter:contrast(0.7)}
.signin-block-bigform{height:935px}
.signin-image{display:block; height:100%; border-top-left-radius:25px; border-bottom-left-radius:25px}
.signin-image-bigform{object-fit:cover; width:40%; min-width:40%}
.signin-form{position:relative; margin:0 25px; padding:10px; text-align:center}
.signin-form > h1{font-weight:400; text-transform:uppercase}
.signin-field{margin-top:25px; padding:10px; width:100%; box-sizing:border-box; font-size:16px}
.signin-form-div{margin:10px 0}
.signin-buttons{display:flex; justify-content:space-between; align-items:center; margin-top:25px}
.signin-button-tiny{color:#051551; font-weight:600}
.signin-button-red{display:inline-block; padding:10px 25px; background-color:#ff3366; color:white; border-radius:5px}

#form-password, #form-forgot, #form-create, #form-verify{display:none}

.system-loading{display:none; justify-content:center; align-items:center; width:100%; height:100%}
.system-loading > div {width: 160px; height: 160px; border-radius: 50%; box-shadow: 0 4px 0 0 #ff3366; animation: system-loading 1s linear infinite; transform-origin: 80px 82px}

.signin-loading{display:none; justify-content:center; align-items:center; width:100%; height:100%}
.signin-loading > div {width: 160px; height: 160px; border-radius: 50%; box-shadow: 0 4px 0 0 #ff3366; animation: system-loading 1s linear infinite; transform-origin: 80px 82px}

.dlg-loading{position:fixed; display:none; top:50%; left:50%; transform:translate(-50%, -50%); z-index:100; padding:25px; border-radius:25px}
.dlg-loading{background: rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.33)}
.dlg-loading{box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;}

.error-text{margin:25px 0; color:red}

@keyframes system-loading {
 0% {transform: rotate(0deg)}
 50% {transform: rotate(180deg)}
 100% {transform: rotate(360deg)}
}

@media (max-width:1233px) {
 .signin{height:1250px}
 .signin-layout{height:1200px; position:static; align-items:flex-start; padding-top:50px}
 .signin-block{flex-direction:column; margin:0 20px; width:600px; height:790px; border-radius:15px}
 .signin-image{object-fit:cover; object-position:top center; width:100%; height:250px; border-top-left-radius:15px; border-top-right-radius:15px; border-bottom-left-radius:0; border-bottom-left-radius:0}
 .signin-block-bigform{height:1080px}
 .signin-form{padding:0; width:unset}
 .error-text{margin:10px 0; color:red}
}

footer{padding:25px; background-color:var(--basemain); color:white; text-align:center}
footer > div{margin:10px 0}
footer > div > a{color:white}

.content-center{margin:0 auto; padding:50px 0; width:100%; max-width:1680px; background-color: #f4f4f4}
.content-center-wrapper{margin:0 50px; background-color:white; border-radius: 25px}
.content-center-wrapper-2{margin:0 auto; padding-top:10px; width:100%; max-width:1250px}
.player-wrapper{margin:0 auto; width:100%; max-width:955px}

.content-title{margin:50px 0; font-size:36px; font-weight:400; text-align:center}
.content-text{margin:25px 0; text-align:justify}

.content-center-cmt{max-width:600px}
.ul-cmt{margin-left:25px}
.li-cmt{margin:20px 0}

.cmt-lesson{display:flex; justify-content:space-between; margin:25px 0}

.cmt-task-status-0{color:#f07c00}
.cmt-task-status-1{color:black}
.cmt-task-status-2{color:#008000}
.cmt-task-status-3{color:red}

@media (max-width:1233px) {
 html, body{background-color:white}
 .content-center{margin:unset; padding:unset; max-width:100%; background-color:white}
 .content-center-wrapper{margin:0 10px}
 .content-title{font-size:24px}
 .content-text{margin:25px}
 .content-center > table.bordergray, table.bordergray{margin:0 25px}
 .content-center > table.bordergray, table.bordergray > tbody > tr > td{display:block}
 .ul-cmt{margin-left:20px}
 .cmt-desc{margin:0 10px; text-align:justify}
}

.buttons-cloud-menu{display:none}

.list-item-1{display:flex; margin:25px 0; padding:25px 0; border-bottom:1px solid; border-color:var(--primarythin)}
.list-item-1:last-of-type{border-bottom:0}

.list-item-1-image{width: 200px; min-width:200px; height: 200px; min-height: 200px; background-size: cover; background-position: center center}
.list-item-1-data{margin-left:25px}

.list-item-1-tags{display:flex}

.list-item-1-tags > a{display:inline-block; margin:0 10px; padding:5px 15px; border-radius:25px}
.list-item-1-tags > a:first-of-type{margin-left:0}
.list-item-1-tags > a:last-of-type{margin-right:0}

.list-item-1-tag-type-1{background-color:var(--secondary); color:white}
.list-item-1-tag-type-2{background-color:white; color:#202020; border:1px solid; border-color:var(--primary)}
.list-item-1-tag-type-2:hover, .list-item-1-tag-type-2-selected{background-color:var(--primarydark); color: white; transition: 0.3s}

.list-item-1-title{display: block; margin:25px 0; font-weight: 600; color: #202020; text-transform: uppercase; font-size: 20px}
.list-item-1-date{display: block; margin-bottom: 25px; color: gray}

.list-item-1-text{display:block; line-height: 20px; color:#202020; text-align: justify}
.list-item-1-text-to-short{overflow:hidden; height:60px}

@media (max-width:1233px) {
 .list-item-1{display: block}
 .list-item-1-image{display: block; margin: 0 auto; width: 300px; min-width: 300px; height: 300px; min-height: 300px}
 .list-item-1-data{margin-left:0}
 
 .list-item-1-tags{justify-content: center}
 
 .list-item-1-tags{flex-direction:column; margin-top:25px}
 .list-item-1-tags > a{display:block; margin:10px 0; text-align:center}
 
 .list-item-1-title, .list-item-1-date{text-align:center}
}


.list-item-2{display:flex; margin:25px 0; padding:25px 0; border-bottom:1px solid; border-color:var(--primarythin)}
.list-item-2:last-of-type{border-bottom:0}

.list-item-2-image{width: 150px; min-width:150px; height:150px; min-height: 150px; background-size: cover; background-position: center center; border-radius: 25px}
.list-item-2-data{margin-left:25px}

.list-item-2-tags{display:flex}

.list-item-2-tags > a{display:inline-block; margin:0 10px; padding:5px 15px; border-radius:25px}
.list-item-2-tags > a:first-of-type{margin-left:0}
.list-item-2-tags > a:last-of-type{margin-right:0}

.list-item-2-tag-type-1{background-color:var(--secondary); color:white}
.list-item-2-tag-type-2{background-color:white; color:#202020; border:1px solid; border-color:var(--primary)}
.list-item-2-tag-type-2:hover, .list-item-1-tag-type-2-selected{background-color:var(--primarydark); color: white; transition: 0.3s}

.list-item-2-title{display: block; margin:25px 0; font-weight: 600; color: #202020; text-transform: uppercase; font-size: 20px}
.list-item-2-date{display: block; margin-bottom: 25px; color: gray}

.list-item-2-text{display:block; line-height: 20px; color:#202020; text-align: justify}
.list-item-2-text-to-short{overflow:hidden; height:60px}

@media (max-width:1233px) {
 .list-item-2{display: block}
 .list-item-2-image{display: block; margin: 0 auto; width: 150px; min-width: 150px; height: 150px; min-height: 150px}
 .list-item-2-data{margin-left:0}
 
 .list-item-2-tags{justify-content: center}
 
 .list-item-2-tags{flex-direction:column; margin-top:25px}
 .list-item-2-tags > a{display:block; margin:10px 0; text-align:center}
 
 .list-item-2-title, .list-item-2-date{text-align:center}
 
 .list-item-2-params{margin-top: 25px; text-align:center}
}


.buttons-cloud{padding:25px 0; text-align:center}
.buttons-cloud > a{display:inline-block; margin:5px; padding:5px 15px; border-radius:25px; background-color:white; color:#4b4b4b; border:1px solid; border-color:var(--secondary)}
.buttons-cloud > a:hover{background-color:var(--secondary); color:white; cursor:pointer; transition: 0.3s}

.button-in-cloud-selected{background-color:var(--secondary) !important; color:white !important}

@media (max-width:1233px) {
 .buttons-cloud-1 > a{display:block; margin:25px 0}
 .buttons-cloud-2{text-align:left}
 
 .buttons-cloud-menu{display:block}
 .buttons-cloud-menu-arrow{font-size:24px; color:var(--secondary)}
 .buttons-cloud-menu-tip{margin-bottom:25px; color:var(--secondary); font-size:14px}
 .buttons-cloud-item-desktop{display:none !important}
}

.content-title-container{margin:25px 0; color:var(--secondary); font-size:28px; text-align:center}
.content-title-container > a{color:var(--secondary)}

.title-ref{display:inline-block; margin:0 25px; color:var(--primarydark)}
.title-selected{padding-bottom:1px; color:var(--secondary); border-bottom:1px solid;  border-color:var(--secondary)}

.input-text{display:block; margin:0 auto; padding:10px; width:100%; max-width:900px; font-size:18px; color:var(--secondary); border-left:0; border-top:0; border-right:0; border-bottom:1px solid; border-color:var(--secondary); box-sizing:border-box; text-align:center}

.podcasts-main{height:535px; background-repeat: no-repeat; background-position:center center} 
.podcasts-main-content{position:relative; display: flex; justify-content:center; align-items:center; width:100%; height:100%; background-color:rgba(141,144,227,0.25); filter: contrast(1.5)}
.podcasts-main-title, .podcasts-edition-title{position:absolute; bottom:100px; color:white; font-size:56px; font-weight:100; text-align:center; text-shadow:#0f2869 4px 2px 10px}

.podcast-edition-desc{margin:0 auto; padding:10px; width:100%; max-width:1250px; background-color: #e3e5ff; color:#202020; box-sizing: border-box; text-align: justify}
.podcast-play{padding:15px 50px; background-color:var(--secondary); color:white; font-size:26px; border-radius: 10px; border:2px solid; border-color:white}

.podcast-main-topmenu{position:absolute; left:0; top:0; right:0; display: flex; justify-content:space-between; padding:25px}
.podcast-main-topmenu > a{color: white; font-size: 24px; text-shadow:#0f2869 4px 2px 10px}

@media (max-width:980px) {
 .podcasts-main{height:430px; background-size:cover}
 .podcasts-main-title, .podcasts-edition-title{bottom:65px}
 .podcasts-edition-title{font-size:36px}
 
 .podcast-edition-desc{text-align:center}
 
 .podcast-main-topmenu{background-image: linear-gradient(to top, rgba(0,87,148,0.0), rgba(0,87,148,0.9));}
 .podcast-main-topmenu > a{font-size: 18px; text-shadow:#0f2869 2px 10px 10px} 
}


.workflow-courses-containter{display: flex; flex-wrap: wrap; justify-content: center}

.workflow-course-item{position: relative; margin: 25px; width: 325px; border: 1px solid; border-color: #7c7cd2; border-radius: 25px}
.workflow-course-item-image{display: block; width: 100%; height: 175px; border-top-left-radius: 25px; border-top-right-radius: 25px}
.workflow-course-item-image > img{width: 100%; border-top-left-radius: 25px; border-top-right-radius: 25px}
.workflow-course-item-labels{display: flex; justify-content: space-between}
.workflow-course-item-labels > div{padding: 10px; color: var(--primarydark)}

.workflow-referal{display: block; margin: 25px; padding: 25px; background-color: hsla(0,0%,100%,.1); border-radius: .75rem; color: white; font-weight: bold; text-align: center}
.workflow-referal:hover{background-color: hsla(0,0%,100%,.5);}

.workflow-user-container{display: flex; justify-content: space-around; align-items: initial; color: white; width: 100%; height: 550px; background-size: cover; background-repeat: no-repeat; border-radius: 25px}
.workflow-user-container-left{display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding-top: 50px; width: 50%}
.workflow-user-container-right{width: 50%}

.workflow-userphoto{display: flex; width: 200px; height: 200px}
.workflow-userphoto > img{display: block; width: 100%; border-radius: 50%; border: 2px solid; border-color: white}

.workflow-navigator{position: relative; background-color: var(--primarythin); padding: 25px; border-radius: 25px; margin-top: 25px}
.workflow-navigator-item-container{display: flex; justify-content: center}
.workflow-navigator-item{position: relative; display: inline-flex; flex-direction: column; justify-content: space-between; align-items: center; margin: 0 10px; width: 150px; height: 150px; border-radius: 25px; background-color: white; color: var(--primarydark); padding: 20px 0; box-sizing: border-box}
.workflow-navigator-item:hover{cursor: pointer}
.workflow-navigator-item-name{margin: 10px 0; text-align: center}
.workflow-navigator-item > div > img{width:60px; height: 60px}

.workflow-navigator-item-button{padding: 5px 15px; background-color: #866bd0; color: white; border-radius: 25px}
.workflow-navigator-item-button:hover{background-color: #e7185b; transition: 0.3s}

.workflow-navigator-counter{position: absolute; display: flex; justify-content: center; align-items: center; right:-14px; top: -14px; width: 30px; height: 30px; border-radius: 25px; background-color: #e7185b; color: white}

.workflow-event-button{display: inline-flex; margin-left: 25px; width: 200px}
.workflow-event-join-button:hover{background-color: #d2ffce; color: #00966d !important}

.workflow-event-joined-button{background-color: #d2ffce; color: #00966d !important}
.workflow-event-joined-button:hover{background-color: #d2ffce; color: #00966d !important}

.workflow-notification{display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid; border-color: var(--primarythin)}
.workflow-notification:last-of-type{border-bottom: 0}

.workflow-notification-data{display: flex; justify-content: space-between; min-width: 150px}
.workflow-notification-name{text-align: center}

.workflow-notification-delete-all-container{text-align: right}

.workflow-user-name{margin-top: 15px; font-size: 36px}
.workflow-user-data{display: flex; justify-content: space-around; margin-top: 15px; width: 100%}

.workflow-referal-program-name{font-size: 24px; text-align: center}

.workflow-user-status{margin-top: 25px}
.workflow-user-status > div{margin: 15px 0}
.workflow-user-status > div:first-of-type{margin-top: 0}
.workflow-user-status > div:last-of-type{margin-bottom: 0}

.workflow-diary-container{padding-bottom: 100px}
.workflow-diary-title{font-size: 24px}
.workflow-diary-item{margin: 50px 25px}
.workflow-diary-item-name{font-size: 20px}
.workflow-diary-item-responce{margin: 25px; font-style: italic}
.workflow-diary-item-date{text-align: right; color: gray; font-style: italic}

.workflow-adminpanel{display:flex; justify-content: space-evenly; margin-top: 25px}

.workflow-faculties{text-align: center}
.workflow-faculty-item{position: relative; display: inline-flex; flex-direction: column; justify-content: space-between; margin: 25px; padding: 25px; border-radius: 25px; width: 415px; height: 520px; box-sizing: border-box}

.workflow-navigator-top-two-buttons{display: flex; justify-content: space-between; margin-top: 50px}
.workflow-navigator-top-two-buttons > a{padding: 10px 40px; font-size: 20px; border-radius: 25px}
.workflow-navigator-top-two-buttons > a:first-of-type{border-color: var(--primarydark); color: var(--primarydark)}
.workflow-navigator-top-two-buttons > a:first-of-type:hover{color: white}

.workflow-lesson-item{display: flex; justify-content: space-between; align-items: center; margin: 25px 0}
.workflow-lesson-item-buttons{display: flex}
.workflow-lesson-item-status{margin-top: 20px; font-size: 16px}

.wlis{padding: 10px 40px; font-size: 20px; border-radius: 25px; color: var(--primarydark); border: 1px solid; border-color: var(--primarydark)}
.wlis:hover{padding: 10px 40px; font-size: 20px; border-radius: 25px; background-color: var(--primarydark); color: white; transition: 0.3s}

.wlis-purple{color: var(--primarydark)}
.wlis-green{color: #00966d}
.wlis-orange{color: #963800}
.wlis-red{color: #960000}

.workflow-lesson-item-name{font-size: 20px}
.workflow-course-end{flex-direction: column}
.workflow-course-end > p{font-size:18px}

@media (max-width:1200px) {
 .workflow-user-container-left{padding-top: 15px; width: 50%}
 .workflow-user-container-right{width: 50%}
 .workflow-userphoto{width: 150px; height: 150px}
 
 .workflow-referal{margin-bottom: 25px}
}

@media (max-width:980px) { 
 .workflow-user-container{display: block; height: unset}
 .workflow-user-container-left{width: 100%}
 .workflow-user-container-right{width: 100%}
 
 .workflow-navigator{padding: 5px}
 .workflow-navigator-item-container{flex-wrap: wrap}
 .workflow-navigator-item{margin: 10px; padding: 15px 0; width: 140px; height: 125px}
 .workflow-lesson-item > div:first-of-type{width: 100%}
 .workflow-lesson-item > div:last-of-type{width: 100%}

 .workflow-navigator-item > div > img{width: 50px; height: 50px}
 
 .workflow-event-button{margin-left: 0; margin-top: 25px; width: 100%}
 .workflow-navigator-counter{top: -10px; right: -10px}
 
 .workflow-notification{display: block; flex-direction: column}
 .workflow-notification-name{display: block; margin-top: 25px}
 .workflow-notification-data{justify-content: space-around}
 .workflow-notification-delete-all-container{text-align: center}
 
 .workflow-user-name{text-align: center}
 .workflow-diary-title{margin: 25px}
 .workflow-faculty-item{display: flex; margin: 25px 0; width: 100%}
 
 .workflow-navigator-top-two-buttons{flex-direction: column; margin-top: 0}
 .workflow-navigator-top-two-buttons > a{margin:10px 0; text-align: center}
 
 .workflow-lesson-item{flex-direction: column}
 .workflow-lesson-item > div{margin: 10px}
 
 .workflow-lesson-item-buttons{flex-direction: column; align-items: center}
 .workflow-lesson-item-name{text-align: center}
 
 .wlis:first-of-type{margin-bottom: 25px}
 
 .workflow-user-container-right{padding-bottom: 25px}
 
 .workflow-adminpanel{display:block}
 .workflow-adminpanel > a{display:block; margin: 50px 0; text-align: center}
 .workflow-adminpanel > a:first-of-type{margin-top: 0}
 .workflow-adminpanel > a:last-of-type{margin-bottom: 0}
}