:root{
    --light-grey: #ddd;
    --white: #ffffff;
    --dark-green: #00847f;
    --light-green: #a8ddd9;
    --red: #85002A;
    --light-green-opac: rgba(168, 221, 217, 0.5);
    --dark-gradient: linear-gradient(0deg,rgba(0, 132, 127, 1) 0%, rgba(2, 184, 178, 1) 100%);
    --light-gradient: linear-gradient(0deg,rgba(168, 221, 217, 1) 0%, rgba(172, 230, 229, 1) 100%);
}

body{ padding:0; margin:0; font-family: sans-serif;}
.container{margin:0 20px;}
h1{margin:initial;}
h2{margin:initial;}
h3{margin:initial;}
nav{position: fixed; top:0; width: 100%; z-index:99;}
.wrapper-menu{display: flex; justify-content: space-between; background: var(--dark-gradient); }
.main-menu{position: fixed; left: 0; top: 33px; padding:10px 0; background: var(--white); z-index:9; width:200px; border-bottom: 2px solid var(--dark-green); display:none;}
.main-menu.visible{display:block;}
.menu-item{display:block; text-decoration: none; padding: 10px; color: var(--dark-green); text-transform: uppercase; transition: all 0.3s ease;}
.menu-item:hover{background: var(--light-green-opac);}
.form-login{padding: 5px; background: var(--light-gradient); position: absolute; width: calc(100% - 10px);}
.form-login form{width: fit-content; margin-left:auto;}
.form-login input{border:none; font-size: 16px; padding: 6px;}
.register-wrap{text-align: right; font-size: 12px;}
.register-link{color: var(--dark-green); text-decoration: none; font-weight: 600;}

button, .button{border:none; background: var(--dark-green); color: var(--white); text-transform: uppercase; padding: 8px; font-weight:600; letter-spacing: 1px; text-decoration: none; border-radius: 5px;}
.button{display:block; width: fit-content; margin-bottom:10px;}
.button-white{color: var(--dark-green); background: none; border: 2px solid var(--dark-green); padding:6px;}
.img-button {border: initial; background: initial; padding:5px; text-decoration:none;}
.hidden{display:none;}

.start-section{height: calc(100vh - 60px); padding-top:60px}
.startpage{display:grid; align-items:center; text-align: center;}

.content.registration{text-align: center;}
.registration-form{text-align:left; max-width: 360px; margin:auto; padding-bottom:50px;}
form label{display:block; font-size: 16px; margin-bottom: 2px; color: var(--dark-green);}
.registration-form input {width: calc(100% - 16px); background: var(--light-green); border: initial; font-size: 16px; padding: 8px;}
.registration-form button{width: fit-content; margin:auto; display:block;}

.grid-two-one{display:grid; grid-template-columns: 2fr 1fr; gap: 40px; margin-top:20px;}
.details{background: var(--light-grey); padding:10px; margin-bottom:20px; border-radius: 5px;}

.carddeck-grid{display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin-bottom:40px;}
.carddeck{padding:10px 10px 50px; border: 2px solid var(--dark-green); background: var(--light-green-opac); border-radius: 5px; position: relative;}
.carddeck .status{background: var(--dark-green); color: var(--white); border-radius: 10px; padding: 4px 8px; text-transform: uppercase; font-size: 12px; width: fit-content; margin-bottom: 10px; letter-spacing: 1px; font-weight: 600;}
.carddeck h3{color: var(--dark-green);}
.carddeck .owner{font-style: italic; margin-bottom:10px; margin-top:2px;}
.carddeck .category{font-weight:600}
.carddeck .message{margin-top:10px;}
.carddeck-menu{position: absolute; bottom: 10px; left: 10px; right: 10px;}

.create-carddeck-form,
.share-carddeck-form,
.create-card-form { padding: 15px; border-radius: 5px; margin-top: 10px; background: var(--light-green-opac);}
.create-carddeck-form textarea,
.create-card-form textarea{width: calc(100% - 6px); margin-bottom: 20px;}
.create-carddeck-form input[type=text]{width: calc(100% - 6px); margin-bottom:20px;}
.create-carddeck-form select{width: calc(100% - 0px); margin-bottom:20px;}
.django-ckeditor-widget {width: 100%;}
.carddeck-title-link {text-decoration: none; color: inherit}

.card-list{list-style: none; padding:initial;}
.card-list .card{padding: 10px 0 10px 10px; border-bottom: 1px solid var(--dark-green); display:grid; grid-template-columns: 1fr 30px 30px 30px; align-items: center;}
.card-list .card.foreign-carddeck{grid-template-columns: 1fr 30px; }

.question-wrapper {height: calc(100vh - 240px); overflow: auto;}

.card-navigation-grid{display:flex; gap:10px; margin-top:20px; justify-content: center;}
.img-button-prev, .img-button-next{background: var(--dark-green); padding: 6px 20px; display:block; width: fit-content; border-radius: 5px;}

.card-item{display: none;}
.card-item.visible{display:block;}
.card-wrap {padding: 15px 15px 95px; background: var(--light-green-opac); border-radius:5px; height: calc(100vh - 280px); position: relative;}
.card-question{margin-bottom:20px;}
.card-label{font-size: 16px; color: var(--dark-green); padding-left:10px;}
.card-headline {font-weight: 600; font-size: 20px; padding: 10px; border-bottom: 1px solid var(--dark-green);}
.answer-buttons a.inactive { pointer-events: none; opacity: 0.4; cursor: not-allowed;}
.card-answer-wrap{display:none; transition: all 0.3s ease;}
.show-answer .card-answer-wrap{display:block; }
.card-answer{max-height: calc(100vh - 410px); overflow: auto;}
.toggle-answer-button{display:block; margin-left:auto;}
.answer-buttons{display:flex; gap: 20px; justify-content: right; margin-top:20px;}
.answer-button{display:grid; grid-template-columns: 30px 1fr; align-items: center; width: fit-content;}
.answer-button.wrong{color: var(--red);}
.answer-button.correct{color: var(--dark-green);}
.card-navigation.fixed {position: absolute; bottom: 15px; left: 15px; right: 15px; height: 80px;}

.messages-wrapper {position: absolute; top: 50px; left: 20px; right: 20px; background: var(--light-green-opac); border-radius: 5px;}
.messages-wrapper.hidden-message{display:none;}
.messages-wrapper .messages{list-style: none;}



@font-face{
    font-family:'icomoon';
    src:url('../fonts/iconfont/icomoon.eot?-k8nlu0');
    src:url('../fonts/iconfont/icomoon.eot?#iefix-k8nlu0') format('embedded-opentype'),
        url('../fonts/iconfont/icomoon.woff?-k8nlu0') format('woff'),
        url('../fonts/iconfont/icomoon.ttf?-k8nlu0') format('truetype'),
        url('../fonts/iconfont/icomoon.svg?-k8nlu0#icomoon') format('svg');
    font-weight:normal;
    font-style:normal;}

.img-button:before{font-family: icomoon;speak: none; font-style: normal; font-weight: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; font-variant: normal;}

.img-button:before{font-size:20px; color: var(--white); cursor:pointer;}
.img-button-menu:before{content:'\e9bd';}
.img-button-login:before{content:'\ea13';}
.img-button-logout:before{content:'\ea14';}
.img-button-edit:before{content:'\e905'; color:var(--dark-green);}
.img-button-delete:before{content:'\ea0d'; color: var(--dark-green);}
.img-button-detail:before{content:'\e9ce'; color: var(--dark-green);}
.img-button-prev:before{content: '\ea1a'}
.img-button-next:before{content: '\ea1b'}
.img-button-correct:before{content: '\ea10'; color: var(--dark-green);}
.img-button-wrong:before{content: '\ea0f'; color: var(--red);}
.img-button-share:before{content: '\e972'; color: var(--dark-green);}
.img-button-save:before{content: '\e92c'; color: var(--dark-green);}
.img-button-is-shared:before{content: '\e975'; color: var(--dark-green);}