/*

    DEMO STYLE

*/



a,

a:hover,

a:focus {

    color: inherit;

    text-decoration: none !important;

    transition: all 0.3s;

    color: white !important;

}



.navbar {

    padding: 15px 10px;

    background: #fff;

    border: none;

    border-radius: 0;

    margin-bottom: 40px;

    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);

}



.navbar-btn {

    box-shadow: none;

    outline: none !important;

    border: none;

}



.line {

    width: 100%;

    height: 1px;

    border-bottom: 1px dashed #ddd;

    margin: 40px 0;

}



/* ---------------------------------------------------

    SIDEBAR STYLE

----------------------------------------------------- */



#sidebar {

    /* width: 250px; */

    width: 300px;

    position: fixed;

    top: 0;

    left: -300px;

    height: 100%;

    z-index: 999;

    background: #12121b7a;

    -webkit-backdrop-filter: blur(5px);

    backdrop-filter: blur(5px);

    color: #fff;

    transition: all 0.3s;

    overflow-y: scroll;

    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);

}



#sidebar.active {

    left: 0;

}



.tx_nav2 {

    float: left;

    width: 100%;

    font-size: 22px;

    background-color: #111;

    /* padding: 20px 40px; */

    text-align: center;

    position: relative;

    font-weight: 700;

    padding-left: 10px;

    padding-right: 40px;

    padding-top: 10px;

}



.tx_nav2 i {

    position: absolute;

    top: 40%;

    right: 3%;

    color: white;

    border-radius: 27px;

    background: radial-gradient(ellipse farthest-corner at right bottom, #c67829 0%, #c67829 8%, #c67829 30%, #c67829 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffffff 8%, #c67829 25%, #000000 62.5%, #5d4a1f 100%);

    /* padding-left: 10px;

    padding-right: 10px;

    padding-top: 5px;

    padding-bottom: 5px; */

    padding-left: 8px;

    padding-right: 8px;

    padding-top: 5px;

    padding-bottom: 5px;

    font-size: 15px;

}



#dismiss {

    /* width: 25px;

    height: 25px;

    line-height: 25px;

    text-align: center;

    background: radial-gradient(ellipse farthest-corner at right bottom, #c67829 0%, #c67829 8%, #c67829 30%, #c67829 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffffff 8%, #c67829 25%, #000000 62.5%, #5d4a1f 100%);

    border-radius: 20px;

    position: absolute;

    border: none;

    color: white;

    font-weight: bold;

    top: 25px;

    right: 10px;

    z-index: 999999999;

    cursor: pointer;

    -webkit-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s; */

}



#dismiss:hover {

    background: #fff;

    color: #565656;

}



.overlay {

    display: none;

    position: fixed;

    width: 100vw;

    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    z-index: 998;

    opacity: 0;

    transition: all 0.5s ease-in-out;

}



.overlay.active {

    display: block;

    opacity: 1;

}



#sidebar .sidebar-header {

    padding: 15px;

    background: #212121;

}



.sidebar-header img {

    /* width: 150px; */

    width: 200px;

    height: auto;

}



#sidebar ul.components {

    border-bottom: aliceblue;

}



#sidebar ul p {

    color: #fff;

    padding: 10px;

}



#sidebar ul li a {

    padding: 20px;

    font-size: 18px;

    display: block;

}



#sidebar ul li a:hover {

    color: #ffe184;

    padding: 30px;

    font-weight: bold;

    background: #121212;

}



a[data-toggle="collapse"] {

    position: relative;

}



.dropdown-toggle::after {

    display: block;

    position: absolute;

    top: 50%;

    right: 20px;

    transform: translateY(-50%);

}



ul ul a {

    font-size: 0.9em !important;

    padding-left: 30px !important;

    background: #6d7fcc;

}



ul.CTAs {

    padding: 20px;

}



ul.CTAs a {

    text-align: center;

    font-size: 0.9em !important;

    display: block;

    border-radius: 5px;

    margin-bottom: 5px;

}



.download {

    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);

    color: white;

    font-size: 20px !important;

    font-weight: bold;

}



.download:hover {

    background: radial-gradient(ellipse farthest-corner at left top, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at right bottom, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%) !important;

    color: white !important;

    font-size: 17px !important;

}



a.article {

    background-color: #262626;

    color: white;

    font-weight: bold;

}



a.article:hover {

    background: #565656 !important;

    color: #fff !important;

    font-size: 17px !important;

}



/* ---------------------------------------------------

    CONTENT STYLE

----------------------------------------------------- */



#content {

    width: 100%;

    min-height: 100vh;

    transition: all 0.3s;

    position: absolute;

    top: 0;

    right: 0;

}



.lang-img .img-css img,

.lang-img-sidebar .img-css img {

    padding-left: 5px;

    background: #f8d18e;

    padding-right: 5px;

    margin-left: 5px;

    border-radius: 5px;

    width: 50px !important;

    cursor: pointer;

}



.language-list__wrapper {

    background-color: #e7b659;

    border-radius: 5px;

    padding: 5px;

    transform: scale(1);

}



.popup-lang img {

    width: 25px !important;

    margin-right: 0.7rem;

}



.language-list__wrapper.selected {

    transform: scale(1);

}



.language-list__wrapper-sidebar.selected {

    transform: scale(1);

    position: relative;

}



.language-list__wrapper-sidebar {

    position: absolute;

    top: 100%;

    right: 0;

    margin-top: 0.1rem;

    min-width: 12rem;

    background: linear-gradient(173deg, #c4a351 30%, #aa7223);

    padding: 0.5rem 0.3rem;

    border-radius: 0.5rem;

    transform: scale(0);

    transform-origin: 11.5rem 0;

    /* transition: all .3s; */

}



.language-list__wrapper {

    position: absolute;

    top: 100%;

    right: 0;

    margin-top: 0.1rem;

    min-width: 12rem;

    background: linear-gradient(173deg, #c4a351 30%, #aa7223);

    padding: 0.5rem 0.3rem;

    border-radius: 0.5rem;

    transform: scale(0);

    transform-origin: 11.5rem 0;

    transition: all .3s;

}



.language-list__container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.3rem 0.5rem;

    cursor: pointer;

    transition: all .3s;

}



.language-list__wrapper .language-list__container:hover {

    background: #a62c2c !important;

    border-radius: 5px;

}



.language-list__name {

    display: flex;

    align-items: center;

    font-size: .88rem;

}



.language-list__name-icon {

    -o-object-fit: contain;

    object-fit: contain;

    margin-right: 0.7rem;

    width: 1.5rem;

    height: 1.5rem;

}



.language-list__name span {

    color: #fff;

}



.language-list__name img {

    width: 25px !important;

}



.grid-container {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    /* gap: 5px; */

    text-align: center;

    padding: 10px;

}



.pd-5 {

    padding: 5px;

    /* Add padding to the grid items */

}



.grid-item {

    position: relative;

    padding: 5px;

    /* Add padding to the grid items */

}



.wrapper-sidebar {

    display: grid;

    grid-template-columns: 4fr 1fr;

    padding: 5px;

}



.box {

    display: grid;

    gap: 5px;

    grid-template-columns: 1fr 1fr;

}



.bg-register-color {

    background: linear-gradient(74deg, #2a2323, #dc2116);

}



.bg-login-color {

    background: linear-gradient(218deg, #c67828 10%, #513213);

}



.btn-sidebar {

    border-radius: 10px;

    border: none;

    padding: 10px 2px;

    font-size: 13px;

    color: white;

    font-weight: bold;

    box-shadow: inset 0 0 0 1.5px #e1b156;

}