/*******************************************************
# Start Fonts
********************************************************/
@font-face {
    font-family: 'nerko_one';
    src: url('fonts/nerko-one/nerkoone-regular-webfont.woff2') format('woff2'),
         url('fonts/nerko-one/nerkoone-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'lobsterregular';
    src: url('fonts/lobster/lobster-regular-webfont.woff') format('woff'),
         url('fonts/lobster/lobster-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
/*******************************************************
# End Fonts
# Start Test Helpers
********************************************************/
.black-border   {border: 2px solid #111111 !important;}
.red-border     {border: 2px solid #ff0000 !important;}
.blue-border    {border: 2px solid #00ffff !important;}
.green-border   {border: 2px solid #00ff00 !important;}
.yellow-border  {border: 2px solid #ffff00 !important;}
.pink-border    {border: 2px solid #ff0066 !important;}
.black-back     {background-color: #111111 !important;}
.red-back       {background-color: #ff0000 !important;}
.blue-back      {background-color: #00ffff !important;}
.green-back     {background-color: #00ff00 !important;}
.yellow-back    {background-color: #ffff00 !important;}
.pink-back      {background-color: #ff0066 !important;}
.white-back     {background-color: #f0f0f0 !important;}
/* $grid-breakpoints: xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px */
.modal {
    overflow: auto !important;
}
/********************************************************
# End Test Helpers
# Start App Top Bar
********************************************************/
/*form > div input[type="text"]*/
.app-nav {
    background-color: #d52b1e;
    border-bottom: 1px solid #d5d9de;
}
.nav-link, .navbar-brand {
    color: #d5d9de !important;
}
.app-nav .container-fluid .navbar-brand {
    font-family: nerko_one;
    font-size: 26px;
}
.app-nav .container-fluid .navbar-toggler {
    border: 1px solid #d5d9de;
}
.app-nav .container-fluid .navbar-toggler .navbar-toggler-icon{
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='rgb(213, 217, 222)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}
.lang-select button {
    padding: 2px 4px 2px 4px !important;
    background-color: #40454a;
    color: #d5d9de;
    border: 1px solid #d5d9de;
    height: 2em;
}
.nav-active {
    border-radius: 40px;
    background-color: #d5d9de;
    color: #40454a !important;
    padding: 4px 8px 4px 8px !important;
}
/********************************************************
# End App Top Bar
# Start App Login Page
********************************************************/
.login-page-height {
    height: calc(100vh - 48px);
}
.login-title {
    font-family: lobsterregular;
    color: #40454a;
    text-align: center;
}
.btn-num {
    box-shadow: 0 0 0 0.2rem #6c757d;
    background-color: #40454a;
    color: #d5d9de;
    font-size: 16px;
    border-radius: 20px;
}
.btn-num:hover {
    box-shadow: 0 0 0 0.2rem #d1d1d1;
    color: #d5d9de;
}
.btn-num:focus {
    box-shadow: 0 0 0 0.2rem #d1d1d1;
}
.btn-login {
    box-shadow: 0 0 0 0.2rem #6c757d;
    background-color: #d5d9de;
    color: #40454a;
    font-size: 16px;
}
.btn-login:hover {
    box-shadow: 0 0 0 0.2rem #b0b0b0;
}
.btn-login:focus {
    box-shadow: 0 0 0 0.2rem #b0b0b0;
}
.btn-clear {
    box-shadow: 0 0 0 0.2rem #d37e7c;
    background-color: #d0211c;
    color: #d5d9de;
    font-size: 16px;
    border-radius: 20px;
}
.btn-clear:hover {
    box-shadow: 0 0 0 0.2rem #fac8c7;
    color: #d5d9de;
}
.btn-clear:focus {
    box-shadow: 0 0 0 0.2rem #fac8c7;
}
/********************************************************
# End App Login Page
# Start App About Page
********************************************************/
/********************************************************
# End App About Page
# Start App Contact Pages
********************************************************/
/********************************************************
# End App Contact Page
# Start App Profile Pages
********************************************************/
#personalInfo .key {
    font-size: 18px;
    font-weight: bold;
    color: #40454a;
}
#personalInfo .value {
    font-size: 16px;
    color: #40454a;
}
#personalInfo .group {
    font-size: 16px;
    text-align: center;
    color: #40454a;
    border: 1px solid #40454a;
    border-radius: 16px;
}
#achievementsInfo {
    padding: 24px 39px 24px 39px;
}
#PTable_wrapper {
    width: 100%;
}
#achievementsInfo .table-bordered {
    border-color: #40454a !important;
}
#achievementsInfo th, .custom-dt td {
    border-color: #40454a !important;
}
#achievementsInfo thead th {
    border-bottom-color: #40454a !important;
    background-color: #40454a !important;
    color: #d5d9de !important;
}
#achievementsInfo tbody + tbody {
    border-top-color: #40454a !important;
}
/********************************************************
# End App Profile Page
# Start App Sub Page
********************************************************/
.app-head-row {
    background-color: #e2e0e0;
    border-radius: 10px;
}
.app-head-row a {
    text-decoration: none;
    position: relative;
}
.app-head-row a .toggle-icon {
    font-size: 20px;
    color: #40454a;
    position: absolute;
    top: 7px;
    right: 20px;
}
.app-head-row span {
    font-family: nerko_one;
    font-size: 22px;
    color: #40454a;
}
.app-card img {
    object-fit: cover;
    border: none;
    min-height: 150px;
    min-width: 100%;
    height: 14vw;
    border-bottom: 1px solid #6c757d;
}
@media (max-width: 768px) {
    .app-card img {
        height: 45vw;
    }
}
.app-card .card-title {
    font-weight: bold;
}
.app-card-btn button {
    margin-right: 5px;
    padding: 5px 11px 4px 11px !important;
    background-color: #40454a;
    color: #d5d9de;
    font-size: 20px;
    border-radius: 20px;
}
.app-card-btn button:hover {
    background-color: #565a5e;
    color: #d5d9de;
}
/********************************************************
# End App Sub Pages
# Start App Quiz Page
********************************************************/
#quizPageContainer {
    background-color: #e6e6e6;
    padding-top: 8px;
    min-height: calc(100vh - 50px);
}
/*******************************************************
# Start App Quiz Page Quiz Carousel
********************************************************/
#carouselContainer {
    background-color: #ffffff;
    padding: 8px 8px 8px 8px !important;
    border-radius: 4px;
    min-height: calc(100vh - 220px);
}
#quizCarousel, #quizCarousel .carousel-inner,
#quizCarousel .carousel-inner .carousel-item {
    min-height: inherit;
}
#quizCarousel .carousel-control-next, #quizCarousel .carousel-control-prev {
    max-width: 40px !important;
    min-width: 40px !important;
    background-color: #cdcdcd;
    border-radius: 4px;
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%40454a' width='8' height='8'%3E%3Cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3E%3C/svg%3E");
}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%40454a' width='8' height='8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3E%3C/svg%3E");
}
#quizCarousel .carousel-item-inner {
    margin: 0px 45px 0px 45px;
    min-height: inherit;
}
/*******************************************************
# Start App Quiz Page Quiz Carousel Card
********************************************************/
#quizCarousel .card {
    border: 1px solid #e6e6e6;
}
#quizCarousel .card-header {
    border-bottom: none;
}
#quizCarousel .card-header .row:first-child {
    border-bottom: 1px solid rgba(0,0,0,.125);
}
#quizCarousel .card-header {
    padding: 0px !important;
    font-family: nerko_one;
    font-weight: bold;
    font-size: 21px;
    color: #40454a;
}
#quizCarousel .hint-part {
    background-color: #e6e6e6;
    border-bottom: 1px solid rgba(0,0,0,.125);
    font-size: 18px;
    color: #212529;
    font-weight: 400;
    font-family: Nunito,sans-serif;
    padding: 10px;
}
#quizCarousel .bi-check2-circle {
    cursor: pointer;
}
#quizCarousel .custom-switch {
    padding-left: 2.5rem;/*2.25rem*/
    padding-right: 0.5rem;/*0rem*/
}
#quizCarousel .custom-switch .custom-control-label:before {
    left: -2.25rem;
    width: 2.5rem;/*1.75rem*/
    pointer-events: all;
    border-radius: 0.5rem;
    cursor: pointer;
}
#quizCarousel .custom-switch .custom-control-label:after {
    top: calc(0.22rem - 4px);/*0.22rem + 2px*/
    left: calc(-2.6rem);/*-2.25rem + 2px*/
    width: calc(1.5rem);/*1rem - 4px*/
    height: calc(1.5rem);/*1rem - 4px*/
    background-color: #adb5bd;
    border-radius: 1rem;/*0.5rem*/
    transition: transform 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
    cursor: pointer;
}
@media (prefers-reduced-motion:reduce) {
    #quizCarousel .custom-switch .custom-control-label:after {
        transition: none;
    }
}
#quizCarousel .custom-switch .custom-control-input:checked~.custom-control-label:after {
    background-color: #fff;
    transform: translateX(1.6rem);/*0.75rem*/
}
#quizCarousel .custom-switch .custom-control-input:disabled:checked~.custom-control-label:before {
    background-color: rgba(52,144,220,0.5);
}
#quizCarousel .card-body {
    padding: 20px 10px 10px 10px !important;
}
#quizCarousel .bi-volume-up {
    height: 100%;
    vertical-align: middle;
    cursor: pointer;
    color: #40454a;
}
#quizCarousel .choice-index {
    margin-bottom: 0px;
    font-weight: bold;
    font-size: 16px;
    color: #40454a;
    text-align: center;
}
 #quizCarousel .form-check-label {
     color: #111111;
     padding-right: 8px;
 }
/*******************************************************
# End App Quiz Page Quiz Carousel Card
# Start App Quiz Page Quiz Gallery Magnifier
********************************************************/
.img-magnifier-glass {
    position: absolute;
    border: 3px solid #000;
    border-radius: 50%;
    cursor: none;
    /*Set the size of the magnifier glass:*/
    width: 200px;
    height: 200px;
    z-index: 999999;
}
/*******************************************************
# End App Quiz Page Quiz Gallery Magnifier
# Start App Quiz Page Quiz Gallery Carousel
********************************************************/
.quiz-img-model .modal-dialog{
    min-width: 70%;
}
#quizCarousel .card-gallery {
    border: 1px solid #e6e6e6;
    border-radius: 0.25rem;
}
#quizCarousel .card-gallery .gallery-item {
    transition: all ease-in-out 0.4s;
    cursor: pointer;
}
#quizCarousel .card-gallery .gallery-item img {
    width: 100%;
    height: 18vw;/*20*/
    object-fit: contain;/*fill*/
}
#quizCarousel .card-gallery .gallery-item:hover {
    transform: scale(1.04);
}
#quizCarousel .card-gallery .gallery-item label {
    border-radius: 0px 0px 4px 4px;
    margin: 0px 0px 0px 1px !important;
    background-color:#e6e6e6;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #40454a;
    width: 99%;
}
@media (max-width: 992px) {
    #quizCarousel .card-gallery .gallery-item img {
        height: 20vw;
    }
}
/*******************************************************
# End App Quiz Page Quiz Gallery Carousel
# End App Quiz Page Quiz Carousel
# Start App Quiz Page Pins buttons
********************************************************/
#titleContainer {
    background-color: #b0b0b0;
    text-align: center;
    border-radius: 4px;
    font-family: nerko_one;
    font-size: 24px;
    color: #40454a;
}
#footerContainer .d-flex {
    flex-wrap: wrap;
}
#footerContainer .btn-pin {
    padding: 0px !important;
    width: 27px;
    height: 27px;
    position: relative;
}
#footerContainer .btn-pin .pin-dot {
    color: darkred;
    position: absolute;
    top: 0px; right: 0px;
}
/*******************************************************
# End App Quiz Page Pins buttons
# Start App Quiz Page Result Board
********************************************************/
#resultBoard {
    width: 100%;
}
#resultBoard .td, th {
    padding: 2px 0px 2px 4px !important;
    font-size: 12px;
    font-weight: bold;
}
#resultBoard .td {
    border: 1px solid #111111;
    text-align: center;
}
#resultBoard .th1, .th2, .th3 {
    background-color: #b0b0b0;
    border-left: 1px solid #111111;
}
#resultBoard .th1 {
    border-top: 1px solid #111111;
}
#resultBoard .th3 {
    border-bottom: 1px solid #111111;
}
#resultBoard .th4 {
    background-color: #99ff99;
    border-top: 1px solid #111111;
    border-right: 1px solid #111111;
    border-bottom: 1px solid #111111;
}
#resultBoard .th5 {
    background-color: #ff8080;
    border-right: 1px solid #111111;
    border-bottom: 1px solid #111111;
}
#resultBoard .tb {
    padding: 0px !important;
    border-right: 1px solid #111111;
    border-top: 1px solid #111111;
}
#resultBoard button {
    width: 100%;
    padding: 2px !important;
    border-radius: 0px !important;
    font-weight: normal !important;
    font-family: nerko_one;
    font-size: 16px;
    background-color: #62636466;
    border-color: #62636466 !important;
    color: #40454a;
}
#resultBoard button:hover {
    padding: 1px !important;
    border: 2px solid #626364a3 !important;
}
#resultBoard .btn-submit {
    background-color: #a8d2f2;
    border-color: #b0b0b0 !important;
    color: #40454a;
}
#resultBoard .btn-back {
    background-color: #b0b0b0;
    border-color: #b0b0b0 !important;
    color: #40454a;
}
/*******************************************************
# End App Quiz Page Result Board
# Start App Quiz Page Gallery Model
********************************************************/
.carousel-indicators li {
    background-color: #999999 !important;
}
.carousel-indicators {
    bottom: -40px !important;
}
.img-carousel-label {
    margin-top: 4px;
    background-color:#e6e6e6;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #40454a;
    width: 100%;
}
/*******************************************************
# End App Quiz Page Gallery Model
# Start App Quiz Page Control Classes
********************************************************/
#quizCarousel .choice-before {
    background-color: #cce6ff;
}
#quizCarousel .choice-after {
    background-color: #80c1ff;
}
#footerContainer .btn-before {
    color: #339cff;
    border-color: #339cff;
}
#footerContainer .btn-after {
    color: #111111 !important;
    background-color: #339cff;
}
#footerContainer .btn-before:hover {
    box-shadow: 0 0 0 .2rem rgba(51, 156, 255,.5);
}
#quizCarousel .choice-correct {
    background-color: #99ff99;
}
#footerContainer .btn-correct {
    color: #111111;
    background-color: #99ff99;
    border-color: #99ff99;
}
#footerContainer .btn-correct:hover {
    box-shadow: 0 0 0 .2rem rgba(153, 255, 153,.5);
}
#quizCarousel .choice-wrong {
    background-color: #ff8080;
}
#footerContainer .btn-wrong {
    color: #111111;
    background-color: #ff8080;
    border-color: #ff8080;
}
#footerContainer .btn-wrong:hover {
    box-shadow: 0 0 0 .2rem rgba(255, 128, 128,.5);
}
/*******************************************************
# End App Quiz Page Quiz Control Classes
# End App Quiz Page
# Start Dashboard Pages
# Start Dashboard Top Bar
********************************************************/
.dash-top-nav {
    background-color: #1a202c;
    border-bottom: 1px solid #d5d9de;
}
.dash-top-nav a {
    color: #d5d9de !important;
}
.dash-top-nav .container-fluid .navbar-brand {
    font-family: nerko_one;
    font-size: 24px;
}
/*******************************************************
# End Dashboard Top Bar
# Start Dashboard Side Bar
********************************************************/
#page-sidebar {
    background: #1a202c;
    height: inherit;
    border-right: 1px solid #d5d9de;
    margin-bottom: 0px !important;
}
#page-sidebar ul {
    list-style-type: none;
    padding-left: 0px;
    margin-left: 0px;
}
#page-sidebar a {
    color: #d5d9de;
    border-bottom: 1px solid #d5d9de;
    font-size: 20px;
    height: 54px;
    width: 100%;
}
#page-sidebar .btn {
    border-radius: 0px 0px 0px 0px !important;
}
#page-sidebar .btn:hover{
    color: #d5d9de;
    border: 2px solid #6f7376;
    padding-top: 4px;
    margin-bottom: 2px;
    font-size: 18.25px;
}
/*******************************************************
# End Dashboard Side Bar
# Start Dashboard Home Page
********************************************************/
.dash-card-row {
    margin: 20px 4vw 0px 4vw;
}
.dash-card-column {
    min-height: 13em;
    padding: 10px !important;
}
.dash-card-column a {
    text-decoration: none;
}
.dash-card {
    border: 2px solid #1a202c;
    border-radius: 10px;
}
.dash-card .card-svg {
    min-height: 70%;
    font-size: 70px;
    color: #1a202c;
    border-bottom: 2px solid #1a202c;
}
.dash-card .card-title {
    min-height: 30%;
    font-family: nerko_one;
    font-weight: bold;
    font-size: 28px;
    color: #1a202c;
    border-top: 2px solid #1a202c;
}
/*******************************************************
# End Dashboard Home Page
# Start Dashboard Pages Header
********************************************************/
#content-header {
    margin-top: 10px;
    margin-bottom: 20px;
}
#content-header .header-title {
    padding-left: 20px;
    font-family: nerko_one;
    font-weight: bold;
    color: #1a202c;
}
#content-header .header-title svg {
    font-size: 60px;
}
#content-header .header-title span {
    vertical-align: top;
    font-size: 50px;
}
#content-header .btn {
    padding: 3px 6px 3px 6px !important;
    width: 75%;
    height: auto;
    background-color: #1a202c;
    border: 1px solid #f0f0f0;
    border-radius: 5px;
    color: #f0f0f0;
    font-family: nerko_one;
    font-size: 18px;
    text-decoration: none;
}
#content-header div.bootstrap-select {
    width: 200px;
}
#content-header button.dropdown-toggle {
    width: inherit;
}
/*******************************************************
# End Dashboard Pages Header
# Start Dashboard Cards Pages
# Start Dashboard Cards Pages Card
********************************************************/
.custom-card {
    border: 2px solid #1a202c;
    border-radius: 4px;
    margin-bottom: 10px;
}
/*******************************************************
# Start Dashboard Cards Pages Card Header
********************************************************/
.header-img-section{
    position: relative;
}
.header-img-section img {
    background-color: #1a202c;
    object-fit: cover;
    border: none;
    min-height: 150px;
    min-width: 100%;
    height: 14vw;
}
@media (max-width: 768px) {
    .header-img-section img {
        height: 45vw;
    }
}
.custom-card-header .header-img-section .header-over-img {
    opacity: 0;
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 0px;
    z-index: 3;
    transition: all ease-in-out 0.3s;
    background: rgba(255, 255, 255, 0);
    padding: 0px;
}
.custom-card-header .header-img-section:hover .header-over-img {
    opacity: 1;
    bottom: 15px;
}
.custom-card-header .header-img-section .header-over-img a,
.custom-card-header .header-img-section .header-over-img button {
    padding: 3px 6px 3px 6px !important;
    background-color: #1a202c;
    color: #f0f0f0;
    border-color: #f0f0f0;
}
.header-title-section {
    border: 4px solid #1a202c;
    border-radius: 4px;
}
.header-title-section p {
    font-size: 18px;
    font-weight: bold;
    color: #1a202c;
    margin-bottom: 4px;
    margin-top: 4px !important;
}
.header-title-section button {
    border-radius:0px 1px 1px 0px !important;
}
#content-cards .fa-pencil-alt {
    font-size: 12px;
    color: #1a202c;
}
#content-cards .fa-pencil-alt:hover {
    font-size: 14px;
    color: #f0f0f0;
    cursor: pointer;
}
#content-cards .btn-explore {
    background-color: #ced1d3;
    font-size: 18px;
}
#content-cards .btn-explore:hover {
    background-color: #b6b9bb;
}
/*******************************************************
# End Dashboard Cards Pages Card Header
# Start Dashboard Cards Pages Gallery Model
********************************************************/
#dashGalleryModal .modal-dialog {
    min-width: 70%;
}
#dashGalleryModal .gallery .gallery-item {
    overflow: hidden;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
}
#dashGalleryModal .gallery .gallery-item .noMedia {
    background-color: #1a202c;
}
#dashGalleryModal .gallery .gallery-item img {
    transition: all ease-in-out 0.4s;
    height: 75vw;
    width: 75vw;
    -o-object-fit: cover;
    object-fit: cover;
}
#dashGalleryModal .gallery .gallery-item:hover img {
    transform: scale(1.1);
}
@media (min-width: 576px) {
    #dashGalleryModal .gallery .gallery-item img {
        height: 35vw;
        width: 35vw;
    }
}
@media (min-width: 992px) {
    #dashGalleryModal .gallery .gallery-item img {
        height: 14vw;
        width: 25vw;
    }
}
/*******************************************************
# End Dashboard Cards Pages Gallery Model
# Start Dashboard Cards Pages Card Table
********************************************************/
.custom-card-table .table-bordered {
    border-color: #1a202c;
}
.custom-card-table th, td {
    padding: 6px !important;
    vertical-align: middle !important;
    border-color: #1a202c !important;
}
.custom-card-table thead th {
    border-bottom-color: #1a202c !important;
    background-color: #1a202c;
    color: #f0f0f0;
}
.custom-card-table tbody + tbody {
    border-top-color: #1a202c !important;
}
.custom-card-table td .fa-play {
    margin-left: 37%;
}
.custom-card-table td .fa-edit,
.custom-card-table td .fa-trash-alt {
    margin-left: 32%;
}
.custom-card-table th .fa-plus {
    margin-left: 42%;
}
#content-cards .btn-cell, .btn-cell-l, .btn-cell-r {
    cursor: pointer;
}
#content-cards .btn-cell:hover {
    padding: 1px !important;
    font-size: 18px;
}
#content-cards .btn-cell-l:hover {
    padding: 2px 6px 2px 2px !important;
    font-size: 18px;
    color: #212529;
}
#content-cards .btn-cell-r:hover {
    padding: 2px 5px 2px 4px !important;
    font-size: 18px;
}
@media (max-width: 992px) {
    .custom-card-table .lg-show {
        display: none !important;
    }
}
@media (min-width: 992px) {
    .custom-card-table .lg-show {
        display: table-cell !important;
    }
}
/*******************************************************
# End Dashboard Cards Pages Card Table
# End Dashboard Cards Pages Card
# Start Dashboard Cards Pages Control Classes
********************************************************/
.bootstrap-select > .is-invalid-select {
    border: 1px solid #e3342f !important;
}
.is-invalid-file {
    padding-bottom: 37px;
    border: 1px solid #e3342f;
    border-radius: 4px;
}
/*******************************************************
# End Dashboard Cards Pages Control Classes
# End Dashboard Cards Pages
# Start Dashboard DataTable
********************************************************/
.custom-dt .table-bordered {
    border-color: #1a202c;
}
.custom-dt th, .custom-dt td {
    vertical-align: middle !important;
    border-color: #1a202c !important;
}
.custom-dt th {
    vertical-align: top !important;
}
.custom-dt td {
    vertical-align: middle !important;
}
.custom-dt thead th {
    padding-bottom: 6px !important;
    padding-top: 6px !important;
    border-bottom-color: #1a202c !important;
    background-color: #1a202c;
    color: #f0f0f0;
    font-size: 14px;
}
.custom-dt tbody + tbody {
    border-top-color: #1a202c !important;
}
.custom-dt .svg-inline--fa {
    font-size: 18px !important;
}
.custom-dt .text-center {
    text-align: center;
}
.custom-dt .pointer {
    cursor: pointer;
}
.custom-dt .control-cell {
    background-color: #cad8e0 !important;
}
.custom-dt .control-cell:hover {
     background-color: #c4cbcf !important;
 }
.custom-dt a.btn {
    font-weight: bold;
    border: 1px solid #1d68a7;
}
.custom-dt td.btn-info a {
    color: #1a202c;
}
.custom-dt td.btn-info a:hover {
    color: #f0f0f0;
}
.custom-dt .form-check-input{
    cursor: pointer;
    margin-left: 5px;
    margin-top: -9px;
}
.custom-dt tr.selected {
    background-color: #b2bcc7 !important;
    color: #111111 !important;
}
.custom-dt tr.played-row {
    background-color: #b2bcc7 !important;
    color: #111111 !important;
}
.custom-dt tr.selected a {
    color: #111111 !important;
}
.custom-dt td.highlight {
    background-color: #eeeeee !important;
}
.custom-dt .custom-even {
    background-color: #eeeeee;
}
.custom-dt thead th input {
    height: 2em;
}
.custom-dt thead th select {
    padding: 3px 0px 3px 1px !important;
    height: 2em;
}
table.fixedHeader-floating thead {
    border-color: #1a202c;
}
table.fixedHeader-floating thead th {
    vertical-align: top !important;
    border-color: #1a202c !important;
    background-color: #1a202c;
    color: #f0f0f0;
}
table.fixedHeader-floating thead th input {
    height: 2em;
}
table.fixedHeader-floating thead th select {
    padding: 3px 0px 3px 1px !important;
    height: 2em;
}
table.fixedHeader-floating thead th svg.bi-check2-circle {
    width: 20px;
    height: 20px;
}
/*******************************************************
# End Dashboard DataTable
# Start Dashboard DataTable Pages Models
********************************************************/
#newObjectModal .form-check-input {
    position: static;
}
#newIdValue {
    text-align: center;
    vertical-align: middle;
    border: 1px solid #111111;
}
.narrow-dropdown .dropdown-menu {
    /*transform: translate3d(-794px, -148px, 0px)*/
    transform: none !important;
    width: 100% !important;
}
/*******************************************************
# End Dashboard DataTable Pages Models
# Start Dashboard Relations Page
********************************************************/
#content-relations .card {
    border: 1px solid #1a202c;;
}
#content-relations .card-header {
    padding: 6px 10px;
    background-color: #1a202c;
}
#content-relations .card-header .div-left {
    float: left;
    font-family: nerko_one;
    color: #f0f0f0;
    font-size: 22px;
}
#content-relations .card-header .div-right {
    float: right;
}
#content-relations .custom-switch {
    padding-left: 2.5rem;/*2.25rem*/
    padding-right: 0.5rem;/*0rem*/
}
#content-relations .custom-switch .custom-control-label:before {
    left: -2.25rem;
    width: 2.5rem;/*1.75rem*/
    pointer-events: all;
    border-radius: 0.5rem;
    cursor: pointer;
}
#content-relations .custom-switch .custom-control-label:after {
    top: calc(0.22rem - 4px);/*0.22rem + 2px*/
    left: calc(-2.6rem);/*-2.25rem + 2px*/
    width: calc(1.5rem);/*1rem - 4px*/
    height: calc(1.5rem);/*1rem - 4px*/
    background-color: #adb5bd;
    border-radius: 1rem;/*0.5rem*/
    transition: transform 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
    cursor: pointer;
}
@media (prefers-reduced-motion:reduce) {
    #content-relations .custom-switch .custom-control-label:after {
        transition: none;
    }
}
#content-relations .custom-switch .custom-control-input:checked~.custom-control-label:after {
    background-color: #fff;
    transform: translateX(1.6rem);/*0.75rem*/
}
#content-relations .custom-switch .custom-control-input:disabled:checked~.custom-control-label:before {
    background-color: rgba(52,144,220,0.5);
}
#content-relations .card-header .div-right .btn {
    border-radius: 50px;
    font-size: 16px;
}
#content-relations .card-header .div-right .btn-info {
    padding: 6px 9px 6px 11px !important;
}
#content-relations .card-header .div-right .btn-info:hover {
    color: #111111;
}
#content-relations .card-header .div-right .btn-explore {
    background-color: #ced1d3;
    padding: 5px 11px 4px 11px !important;
    font-size: 18px;
}
#content-relations .card-header .div-right .btn-explore a {
    color: #111111;
}
#content-relations .card-header .div-right .btn-explore:hover {
    background-color: #b6b9bb;
}
#content-relations .card-body .row {
    border-bottom: 1px solid #1a202c;
    background-color: #f8fafc;
}
#content-relations .line-key {
    text-align: center;
    background-color: #d8dadc;
    font-family: nerko_one;
    font-size: 18px;
}
#content-relations .line-val {
    font-weight: bold;
}
/*******************************************************
# End Dashboard Relations Page
# Start Dashboard Relation Details Page
********************************************************/
#manipulateRelationModel .modal-dialog {
    min-width: 70%;
}
#manipulateRelationModel .bootstrap-select .btn {
    border-radius: 4px 0px 0px 4px;
}
#manipulateRelationModel .col-1 .btn {
    border-radius: 0px 4px 4px 0px;
}
#manipulateRelationModel .invalid-feedback {
    font-size: 16px;
}
/*******************************************************
# End Dashboard Relation Details Page
# Start Dashboard Gallery Page
********************************************************/
#content-upload h5 {
    font-family: nerko_one;
    vertical-align: middle;
    color: #1a202c;
    font-size: 24px;
}
#content-gallery .gallery-item img {
    transition: all ease-in-out 0.4s;
    object-fit: cover;
    min-height: 150px;
    min-width: 100%;
    height: 14vw;
}
#content-gallery .gallery-item {
    position: relative;
    overflow: hidden;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
}
#content-gallery .gallery-item:hover img {
    transform: scale(1.1);
}
#content-gallery .gallery-item .control-over-img {
    opacity: 0;
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 0px;
    z-index: 3;
    transition: all ease-in-out 0.3s;
    background: rgba(255, 255, 255, 0);
    padding: 0px;
}
#content-gallery .gallery-item:hover .control-over-img {
    opacity: 1;
    bottom: 15px;
}
#content-gallery .img-btn {
    padding: 3px 6px 3px 6px !important;
    background-color: #1a202c;
    color: #f0f0f0;
    border-color: #f0f0f0;
}
#content-gallery .btn-danger {
    padding: 3px 6px 3px 6px !important;
    border-color: #f0f0f0;
}
/*******************************************************
# End Dashboard Gallery Page
# Start Dashboard User Page
********************************************************/
.user-switch .custom-switch {
    padding-left: 2.5rem;/*2.25rem*/
    padding-right: 0.5rem;/*0rem*/
}
.user-switch .custom-switch .custom-control-label:before {
    left: -2.25rem;
    width: 2.5rem;/*1.75rem*/
    pointer-events: all;
    border-radius: 0.5rem;
    cursor: pointer;
}
.user-switch .custom-switch .custom-control-label:after {
    top: calc(0.22rem - 4px);/*0.22rem + 2px*/
    left: calc(-2.6rem);/*-2.25rem + 2px*/
    width: calc(1.5rem);/*1rem - 4px*/
    height: calc(1.5rem);/*1rem - 4px*/
    background-color: #adb5bd;
    border-radius: 1rem;/*0.5rem*/
    transition: transform 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
    cursor: pointer;
}
@media (prefers-reduced-motion:reduce) {
    .user-switch .custom-switch .custom-control-label:after {
        transition: none;
    }
}
.user-switch .custom-switch .custom-control-input:checked~.custom-control-label:after {
    background-color: #d7d5d5;
    transform: translateX(1.6rem);/*0.75rem*/
}
.user-switch .custom-switch .custom-control-input:disabled:checked~.custom-control-label:before {
    background-color: rgba(52,144,220,0.5);
}
.btn-delete {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
}
#user-form .bootstrap-select .btn {
    border-radius: 4px 0px 0px 4px;
}
#user-form .col-2 .btn {
    border-radius: 0px 4px 4px 0px;
}
#user-form button.dropdown-toggle {
    background-color: #ffffff !important;
}
#user-form th {
    text-align: center;
    font-size: 14px;
}
/*******************************************************
# End Dashboard User Page
# End Dashboard Pages
********************************************************/
.fa-play, .fa-pause, .fa-volume-up {
    cursor: pointer;
}