.btn-main-theme {
    background: #2bc48a;
    color: white;
}
.btn-main-theme:hover {
    background: #009d73;
    color: white;
}

.bg-main-theme  {
    background: #2bc48a;
}


.bg-not-viewed  {
    background: rgba(43, 196, 138, 0.45);
}


.btn-orange-theme {
    background: #fca120;
    color: white;

}
.btn-orange-theme:hover {
    background: #f69110;
    color: white;

}
.btn-blue-theme {
    background: #0b2239;
    color: white;

}
.btn-blue-theme:hover {
    background: #0f2841;
    color: white;

}

.btn-colorful-theme {
    background: linear-gradient(45deg, #8B5CF6, #EC4899);
    color: white;
    border:none;
}


.text-hint {
    font-size: 12px;
}

.cursor-pointer:hover {
    cursor: pointer;
}

.link-underscore {
    color: black;
}
.link-underscore-grey {
    color: #636D77;;
    text-decoration: underline;
}

.text10{
    font-size: 10px;
}
.text12{
    font-size: 12px;
}
.text14{
    font-size: 14px;
}
.text16{
    font-size: 16px;
}

.card-a {
    background: #F4F5F9;
    border-radius: 16px;
    margin: 0  ;
    padding: 8px;
    font-size: 12px;

}

.card-a-title {
    padding-bottom: 0;
    margin-bottom: 8px;
    margin-top: 16px;
    font-size: 12px;
}



.card-b {
    margin: 8px;
    padding:  8px 16px;
    background: white;
    border-radius: 10px;
    font-size: 12px;
    color: #636D77;
}

.text-input-b {
    background: white;
    border-radius: 10px;
    outline: none;
    box-sizing: border-box;
    border: none;
    width:100%;
    padding: 18px;
    flex: 1 0 auto;
    color: #636D77;
}


.card-b p {
    margin:0;
}

.card-c {
    border-radius: 20px;
    border: 3px solid #49D294;
    padding: 20px;
}

.positive {
    background: rgba(73, 210, 148, 0.1);
}


.check-badge {
    padding: 5px 10px;
    margin: 4px;
    border-radius: 10px;
    background: lightgrey;
}
.check-badge:hover {
    cursor: pointer;
}


.check-badge.active {
    background: #49D294;
}

.quiz-link{
    margin-left: 28px;
}

.quiz-link::before {
    position: absolute;
    top:0;
    left: -24px;
    content: "";
    width: 20px;
    height: 20px;
    margin-left: 28px;
    background-image: url("/icons/flat/9306919.png");
    background-size: 20px;
}
.advanced-quiz-link{
    margin-left: 28px;
}

.advanced-quiz-link::before {
    position: absolute;
    top:0;
    left: -24px;
    content: "";
    width: 20px;
    height: 20px;
    margin-left: 28px;
    background-image: url("/icons/flat/9306896.png");
    background-size: 20px;
}
.word-quiz-link{
    margin-left: 28px;
}

.word-quiz-link::before {
    position: absolute;
    top:0;
    left: -24px;
    content: "";
    width: 20px;
    height: 20px;
    margin-left: 28px;
    background-image: url("/icons/flat/9306878.png");
    background-size: 20px;
}
.training-link{
    margin-left: 28px;
}

.training-link::before {
    position: absolute;
    top:0;
    left: -24px;
    content: "";
    width: 20px;
    height: 20px;
    margin-left: 28px;
    background-image: url("/icons/flat/9306907.png");
    background-size: 20px;
}
.crossword-link{
    margin-left: 28px;
}

.crossword-link::before {
    position: absolute;
    top:0;
    left: -24px;
    content: "";
    width: 20px;
    height: 20px;
    margin-left: 28px;
    background-image: url("/icons/flat/9306918.png");
    background-size: 20px;
}


body.dark-theme {
    background: #0e1621;
    color: white;
}

.dark-theme .text-secondary {
    color: lightgrey!important;
}
.dark-theme .ic {
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}


.dark-theme .card-a {
    background: #27343f;
}

.dark-theme .card {
    background: #27343f;
}


.dark-theme .card-b {
    background: #3b4b59;
    color: #b6b6b6;
}
.dark-theme input, textarea {

    background-color : #3b4b59;
    color: #f3f3f3;

}
.dark-theme textarea {

    background-color : #3b4b59;
    color: #f3f3f3;

}
.dark-theme input[type='checkbox'] {

    background-color : #3b4b59;
    color: #f3f3f3;

}

.dark-theme .dropdown-menu {
    background-color : #4f6373;
    color: #f3f3f3;

}
.dark-theme .dropdown-item {
    color: #f3f3f3;

}
.dark-theme .link-underscore-grey{
    color: #cccccc;

}
.dark-theme .link-underscore{
    color: #cccccc;

}