/* Fonts Imported  */

 @font-face {
     font-family : "Montserrat", sans-serif;
     src         : url('./../fonts/montserrat/Montserrat-Thin.ttf') format('truetype');
     font-weight : 100;
     font-style  : normal;
     font-display: swap;
 }

 @font-face {
     font-family : "Montserrat", sans-serif;
     src         : url('./../fonts/montserrat/Montserrat-ExtraLight.ttf') format('truetype');
     font-weight : 200;
     font-style  : normal;
     font-display: swap;
 }

 @font-face {
     font-family : "Montserrat", sans-serif;
     src         : url('./../fonts/montserrat/Montserrat-Light.ttf') format('truetype');
     font-weight : 300;
     font-style  : normal;
     font-display: swap;
 }

 @font-face {
     font-family : "Montserrat", sans-serif;
     src         : url('./../fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
     font-weight : 400;
     font-style  : normal;
     font-display: swap;
 }

 @font-face {
     font-family : "Montserrat", sans-serif;
     src         : url('./../fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
     font-weight : 500;
     font-style  : normal;
     font-display: swap;
 }

 @font-face {
     font-family : "Montserrat", sans-serif;
     src         : url('./../fonts/montserrat/Montserrat-SemiBold.ttf') format('truetype');
     font-weight : 600;
     font-style  : normal;
     font-display: swap;
 }

 @font-face {
     font-family : "Montserrat", sans-serif;
     src         : url('./../fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
     font-weight : 700;
     font-style  : normal;
     font-display: swap;
 }

 @font-face {
     font-family : "Montserrat", sans-serif;
     src         : url('./../fonts/montserrat/Montserrat-ExtraBold.ttf') format('truetype');
     font-weight : 800;
     font-style  : normal;
     font-display: swap;
 }

 @font-face {
     font-family : "Montserrat", sans-serif;
     src         : url('./../fonts/montserrat/Montserrat-Black.ttf') format('truetype');
     font-weight : 900;
     font-style  : normal;
     font-display: swap;
 }




 /* 01. Root css  */


 :root {
     --primary-color  : #fd6a02;
     --secondary-color: #eff1ed;
     --text-color     : #888888;
     --white-color    : #ffffff;
     --black-color    : #000000;
     --accent-color   : #092f53;
     --overlay-color  : rgba(22, 51, 0, 0.65);
     --error-color    : rgb(230, 87, 87);
     --accent-font    : "Montserrat", sans-serif;
     --default-font   : "Montserrat", sans-serif;
 }

 /************************************/
 /**** 	   02. General css		 ****/
 /************************************/

 body {
     font-size  : 16px;
     font-weight: 400;
     font-family: "Montserrat", sans-serif;
     color      : var(--text-color);
     line-height: 1.6em;
 }


 .contact-form-box {
     -webkit-user-select  : all;
     /* Safari */
     -moz-user-select     : all;
     /* Firefox */
     -ms-user-select      : all;
     /* IE10+/Edge */
     user-select          : all;
     /* Standard */
     -webkit-touch-callout: all;
     /* Disable context menu on iOS */
 }

 p {
     line-height  : 1.6em;
     margin-bottom: 1em;
     line-height  : 27px;
     font-size    : 14px;
     color        : #858585;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: "Montserrat", sans-serif;
     margin-top : 0;
     font-weight: 600;
     color      : var(--primary-color);
 }

 figure {
     display: block;
     margin : 0;
     width  : 100%;
 }

 img {
     max-width: 100%;
 }

 a {
     text-decoration: none;
 }

 a:hover {
     text-decoration: none;
     outline        : 0;
 }

 a:focus {
     text-decoration: none;
     outline        : 0;
 }

 /* .container{
	max-width: 1300px;
} */

 .container,
 .container-fluid,
 .container-lg,
 .container-md,
 .container-sm,
 .container-xl,
 .container-xxl {
     padding-right: 15px;
     padding-left : 15px;
 }

 .no-gap.row {
     margin-left : 0;
     margin-right: 0;
 }

 .no-gap.row>* {
     padding-left : 0;
     padding-right: 0;
 }

 .row.row-equal-height>[class*="col-"] {
     display       : flex;
     flex-direction: column;
 }


 .row {
     margin-right: -15px;
     margin-left : -15px;
 }

 .row>* {
     padding-right: 15px;
     padding-left : 15px;
 }

 .btn-default {
     display      : inline-block;
     background   : var(--accent-color);
     color        : var(--white-color);
     font-size    : 16px;
     font-weight  : 500;
     border       : 0px;
     padding      : 12px 30px;
     border-radius: 5px;
     position     : relative;
     overflow     : hidden;
     z-index      : 0;
     transition   : 0.2s transform ease-in-out;
 }

 .btn-default:after {
     background-color: var(--primary-color);
     border-radius   : 10px;
     content         : "";
     display         : block;
     height          : 100%;
     width           : 100%;
     position        : absolute;
     left            : 0;
     top             : 0;
     transform       : translate(-100%, 0) rotate(10deg);
     transform-origin: top left;
     transition      : 0.2s transform ease-out;
     will-change     : transform;
     z-index         : -1;
 }

 .btn-default:hover::after {
     transform: translate(0, 0);
 }

 .btn-default:hover {
     color: var(--white-color);
 }

 .btn-default.btn-border {
     background: none;
     color     : var(--accent-color);
 }


 .menuhide {
     display: none;
 }


.modal-title {
    font-size: 16px;
    color: #2a2a2a;
    margin: 0px;
}

.modal-body h5{
    font-size: 18px;
}

.headstylenew {
    color: #000;
}

#question-text {
    color: #000;
}

.card-title {
    font-size: 17px !important;
    font-weight: 600 !important;
}

.list-group-item {
    font-size: 15px;
    line-height: 30px;
}

 .custom-tooltip {
     font-size       : 14px;
     font-weight     : bold;
     background-color: rgba(0, 0, 0, 0.9);
     color           : white;
     padding         : 3px;
     border-radius   : 5px;
 }


 .tooltip {
     background-color: white !important;
     color           : black !important;
     padding         : 5px !important;
     border-radius   : 5px !important;
     box-shadow      : 0px 4px 6px rgba(0, 0, 0, 0.1);
     font-size       : 13px !important;
     font-weight     : 400;
 }

 .tooltip .tooltip-inner {
     background-color: white !important;
     color           : black !important;
     padding         : 5px !important;
     border-radius   : 5px !important;
     max-width       : 300px;
     /* Adjust width as needed */
     white-space     : normal;
     /* Ensures text wraps inside tooltip */
 }

 .tooltip .tooltip-inner strong {
     font-size  : 15px;
     /* Adjust size as needed */
     font-weight: 600;
 }

 .tooltip .arrow::before {
     border-width: 12px;
     /* Increase arrow size */
 }

 .tooltip-arrow {
     width : 12px;
     height: 12px;
 }

 .tooltip .tooltip-arrow {
     width       : 15px !important;
     border-color: white !important;
 }

 .tooltip .tooltip-arrow::before {
     border-top-color   : white !important;
     /* Change for top placement */
     border-bottom-color: white !important;
     /* Change for bottom placement */
 }

 .tooltip-status {
     color     : #555;
     display   : block;
     margin-top: 5px;
     /* Adjust spacing */
 }


 .topbar {}

 /* .topbar:after {
     position: absolute;
     content: "";
     top: 0px;
     left: auto;
     right: 0;
     background-image: url(../../assets/images/topbarbg.png);
     width: 250px;
     height: 100%;
     background-size: cover;
     background-repeat: no-repeat;
 } */

 .navbar {
     padding   : 0px;
     background: #2A2A2A;
     position  : relative;
 }

 .navbar:after {
     position         : absolute;
     content          : "";
     top              : 0px;
     left             : 70%;
     right            : 0;
     background-image : url(../../assets/images/topbarbg.png);
     height           : 100%;
     background-size  : contain;
     background-repeat: no-repeat;
     margin           : auto;
 }


 .logoz {
     padding: 10px 0px;
 }

 .logoz img {
     width: 150px;
 }

 .navbar-text .signbtn {
     padding      : 5px 18px;
     background   : #fff;
     color        : #c5ad72;
     border-radius: 1px;
     font-weight  : 500;
     font-size    : 15px;
 }

 .navbar-text {
     display        : flex;
     justify-content: space-between;
     align-items    : center;
     gap            : 30px;
 }


.profdetz {
    position: relative;
    background: transparent;
    color: #fff;
    border: 0px;
    z-index: 99;
}

 .profdetz img {}

 .cust-nav {
     background: #F2F2F2 !important;
     padding   : 10px 0px;
 }

 .mainnav .nav-item:first-child{
     border-left: 1px solid #BEBABA;
 }

 .mainnav .nav-link {
     padding      : 0px;
     padding-left : 24px !important;
     padding-right: 24px !important;
     color        : #2A2A2A;
     font-size:15px;
 }

 .mainnav .nav-item {
     border-right: 1px solid #BEBABA;
 }

 .mainnav .dropdown-item {
     border-bottom: 1px solid #ccc;
 }

 .mainnav .dropdown-item.active,
 .mainnav .dropdown-item:active {
     color           : var(--bs-dropdown-link-active-color);
     text-decoration : none;
     background-color: #fd6a02;
     border-bottom   : 1px solid #ccc;
 }

 .mainnav .nav-link:hover {
     color: #fd6a02;
 }

 .navbar-nav .dropdown-menu {
     padding   : 0px;
     top       : 10px;
     margin-top: 16px;
     width     : 100%;
 }

 .mainscreen{
     position: relative;
     padding : 30px 0px;
 }

.mainscreen h1, .mainscreen h2, .mainscreen h3, .mainscreen h4, .mainscreen h5 {
    font-size: 20px;
    color: #2a2a2a;
    font-weight: 600;
}

.d-grid .btn-primary {
    max-width: 300px;
    min-width: 300px;
    margin: auto;
}

.mainscreen .card{
    border-radius:0px;
}

.mainscreen .card-header{
    border-radius:0px;
}

.mainscreen .card-body h3, .mainscreen .card-body h4, .mainscreen .card-body h5{
    color:#2A2A2A;
}

 button.add-option-btn {
    min-width: 300px;
    max-width: 300px;
    margin: auto;
}

 .mainscreen .form-check-input:checked {
    background-color: #fd6a02;
    border-color: #fd6a02;
}

 .mainscreen .form-check-input:focus {
    border-color: #fd6a02;
    outline: 0;
    box-shadow: 0 0 0 .25rem #fd6a0247;
}

.alert.alert-info {
    padding: 5px 15px;
    font-size: 15px;
    border-radius: 0px;
}

.card-front, .card-back{
     border-radius: 0px!important;
}

.swiper-button-next, .swiper-button-prev{
   color: #fd6a02!important;
}

.badge{
   border-radius: 0px;
}

.list-group {
    border-radius: 0px;
}

 .mainscreen .form-label {
    margin-bottom: .5rem;
    font-size: 15px;
    color: #5e5b5b;
}

 .mainscreen label {
    margin-bottom: .5rem;
    font-size: 15px;
    color: #5e5b5b;
}

 .mainscreen .form-control {
    border-radius: 0px;
        font-size: 14px;
}

 .mainscreen .form-select{
    border-radius: 0px;
        font-size: 14px;
}

  .mainscreen .form-select:focus {
    border-color: #000;
    outline: 0;
    box-shadow: none;
}

  .mainscreen .form-control:focus {
    border-color: #000;
    outline: 0;
    box-shadow: none;
}



.card-header h2, .card-header h3, .card-header h4{
    margin:0px;
}



 .tablebox {
     position: relative;
 }

 .tablebox .table {
     margin-bottom: 0px;
 }

 .table-head {
     background: #E9E9E9;
 }

 .table-head th {
     background: #E9E9E9;
 }

 /* Open dropdown on hover */
 .navbar-nav .dropdown:hover .dropdown-menu {
     display    : block;
     margin-top : 0;
     /* Optional: remove any unwanted spacing */
 }

 .navbar-nav .dropdown:hover>.dropdown-menu {
     display    : block;
     margin-top : 16px;
     /* Optional: clean alignment */
 }



 .navbar-nav .dropdown:hover>.dropdown-menu {
     display: block;
 }

 .cust-nav .dropdown-item {
     border-top: 1px solid #efefef;
 }

 .cust-nav .dropdown-item:not(.dt-button) {
     font-size: 12px;
     padding  : 6px 12px;
 }

 .cust-nav .navbar-nav .dropdown-menu {
     border-radius: 0;
 }

 .dropup,
 .dropright,
 .dropdown,
 .dropleft {
     position: relative;
 }

 .cust-nav .dropdown-menu {
     padding-top   : 0;
     padding-bottom: 0;
 }

#question-area .card{
    border-radius:0px;
}

#cards-wrapper .card{
    border-radius:0px;
}

.btn{
    border-radius:0px;
        font-size: 14px;

}


 .btn-edit {
     background   : #CACACA;
     border-radius: 0px;
     color        : #212121;
 }

 .btn-edit:hover {
     background: #CACACA;
     color     : #212121;
 }

 .btn-attempt {
     background   : #2A2A2A;
     border-radius: 0px;
     color        : #fff;
 }


 .btn-attempt:hover {
     background: #2A2A2A;
     color     : #fff;
 }

 .btn:first-child:active{
     background: #fd6a02;
 }


   .btn-primary {
     background   : #fd6a02;
     border-radius: 0px;
     color        : #fff;
     border:0px;
 }


 .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:focus-visible{
     background: #fd6a02;
     color     : #fff;
 }

  .btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus, .btn-outline-primary:focus-visible{
     background: #fd6a02;
     color     : #fff;
     border-color   : #fd6a02;
 }

 .btn-outline-primary{
     border-color   : #fd6a02;
     color   : #fd6a02;
 }

  .btn-secondary {
     background   : #2A2A2A;
     border-radius: 0px;
     color        : #fff;
     border:0px;
 }


 .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:focus-visible {
     background: #2A2A2A;
     color     : #fff;
 }

   .btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary:focus, .btn-outline-secondary:focus-visible{
     background: #2A2A2A;
     color     : #fff;
     border-color   : #2A2A2A;
 }

 .btn-outline-secondary{
     border-color   : #2A2A2A;
     color   : #2A2A2A;
 }


 .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    background-color: #fd6a02;
    border-color: #fd6a02;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    background-color: #2A2A2A;
    border-color: #2A2A2A;
}

 .stat {
     text-align: end;
 }

 .loglefbox {
     position       : relative;
     display        : flex;
     height         : 100%;
     justify-content: center;
     align-items    : center;

 }

 .loglefinbox {
     position         : relative;
     text-align       : left;
     padding          : 32% 25%;
     background-image : url(../../assets/images/loglef.png);
     background-size  : cover;
     background-repeat: no-repeat;
 }

 .loglefbot {
     position: absolute;
     left    : 20px;
     bottom  : 25px;
 }

 .loglefinbox h4 {
     position   : relative;
     color      : #fff;
     font-size  : 24px;
     line-height: 40px;
     font-weight: 500;
 }

 .loglefinbox h4 span {
     color  : #C5AD72;
     display: block;
 }

 .loglefinbox p {
     color    : #696866;
     max-width: 75%;
 }

 .logritbox {
     position  : relative;
     padding   : 12% 50px;
     z-index   : 1;
     background: #fff;
 }

 .logritinbox h5 {
     color      : #696866;
     font-size  : 14px;
     font-weight: 400;
     text-align : center;
 }

 .logritinbox p {
     color     : #C5AD72;
     text-align: center;
 }

 .loginbox {
     padding   : 22px 75px;
     text-align: center;
 }

 .logritbot {
     position: absolute;
     right   : 0px;
     bottom  : 0px;
 }

 .logimgbox {
     text-align: center;
 }

 .logimgbox img {
     text-align: center;
 }


 .loginbox h2 {
     color      : #252424;
     margin     : 15px 0px;
     font-weight: 800;
     text-align : center;
 }

 .loginform .form-label {
     color      : #252424;
     font-size  : 13px;
     font-weight: 500;
 }

 .loginform .form-control {
     background   : #F0F0F0;
     border-radius: 1px;
     font-size    : 14px;
     border       : 0px;
     text-align   : center;
 }

 .loginform .form-control:focus,
 .loginform .form-control:visited,
 .loginform .form-control:hover {
     border    : 0px;
     box-shadow: none;
     background: #F0F0F0;
 }

 .forgotpass {
     color    : #C5AD72;
     font-size: 13px;
 }

 .forgotpass:hover {
     color: #C5AD72;
 }

 .loginform {
     padding: 30px 75px;
 }

 .loginbtn {
     background   : #000;
     color        : #fff;
     border-radius: 0px;
     position     : relative;
     margin-top   : 20px;
 }

 .loginbtn:hover {
     background: #171F37;
     color     : #fff;
 }






 .lefritscreen {
     position: relative;
 }

 .fixed-sidebar {
     position: fixed !important;
     top     : 60px;
     /* Adjust based on your topbar height */
     width   : 100%;
     /* Ensure it takes the correct width */
     z-index : 1000;
 }

 html {
     scroll-behavior: smooth;
 }


 .navbar-text a {
     position: relative;
     z-index : 9;
 }

 .navbar-text a.profdetz {
     position: relative;
     color   : #fff;
 }


 .navbar-text h5 {
     position       : absolute;
     color          : #fff;
     text-align     : end;
     right          : -8px;
     font-size      : 12px;
     margin         : 5px 0px 0px;
     display        : flex;
     width          : 100px;
     justify-content: end;
     letter-spacing : 0.3px;
 }


 .navbar-text h5 i {
     margin-left: 3px;
     color      : #FED46D;
 }



 .footz {
     background: #2A2A2A;
     position  : relative;
     z-index   : 9999;
     padding   : 12px 0px;
 }

 .footcopy {
     text-align: center;
 }

 .footcopy p {
     color      : #FFFFFF;
     font-size  : 14px;
     line-height: 24px;
     margin     : 0px 0px 0px;
 }


 .footcopy p a {
     color: #FD6A02;
 }





 .custom-tooltip {
     font-size       : 14px;
     font-weight     : bold;
     background-color: rgba(0, 0, 0, 0.9);
     color           : white;
     padding         : 3px;
     border-radius   : 5px;
 }


 .tooltip {
     background-color: white !important;
     color           : black !important;
     padding         : 5px !important;
     border-radius   : 5px !important;
     box-shadow      : 0px 4px 6px rgba(0, 0, 0, 0.1);
     font-size       : 13px !important;
     font-weight     : 400;
 }

 .tooltip .tooltip-inner {
     background-color: white !important;
     color           : black !important;
     padding         : 5px !important;
     border-radius   : 5px !important;
     max-width       : 300px;
     /* Adjust width as needed */
     white-space     : normal;
     /* Ensures text wraps inside tooltip */
 }

 .tooltip .tooltip-inner strong {
     font-size  : 15px;
     /* Adjust size as needed */
     font-weight: 600;
 }

 .tooltip .arrow::before {
     border-width: 12px;
     /* Increase arrow size */
 }

 .tooltip-arrow {
     width : 12px;
     height: 12px;
 }

 .tooltip .tooltip-arrow {
     width       : 15px !important;
     border-color: white !important;
 }

 .tooltip .tooltip-arrow::before {
     border-top-color   : white !important;
     /* Change for top placement */
     border-bottom-color: white !important;
     /* Change for bottom placement */
 }


 .tooltip-status {
     color     : #555;
     display   : block;
     margin-top: 5px;
     /* Adjust spacing */
 }



 .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
 .bs-tooltip-start .tooltip-arrow::before {
     left               : 9px;
     border-left-color  : #fff !important;
     border-top-color   : transparent !important;
     border-bottom-color: transparent !important;
 }


.cust-nav{
    display:none;
}


 .createbox {
        position: relative;
    }

    .creatflbox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        position: relative;
    }

    .creatflbox:last-child .creatinbox:after {
        background: none;
    }

    .creatinbox {
        min-width: 20%;
        max-width: 20%;
        padding: 10px 15px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }


    .creatinbox::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        background: linear-gradient(to right, #ededed45, #87878724, #ededed45);
    }

    .creatinbox::before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 2px;
        background: linear-gradient(to bottom, #ededed45, #87878724, #ededed45);
    }

    .creatimgbox {
        min-height: 120px;
        display: flex;
        align-items: center;
    }

    .creatinbox h4 {
            color: #2A2A2A;
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
    min-height: 48px;
    margin: 10px 0px 5px;
    }

    .creatinbox p {
        color: #2A2A2A;
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        min-height: 70px;
            margin-bottom: 10px;
    }

    .creatinbox a {
        background: #352C2C;
        color: #fff;
        font-size: 13px;
        font-weight: 400;
        border-radius: 3px;
        padding: 2px 15px;
    }


.tablebox .table td{
    font-size:14px;
}

.stat a.btn{
    font-size:13px;
}

.dashboardscreen{
    position:relative;
    padding:20px 0px;
}

.topbackbtn{
    position:relative;
}

.tbackbtn i{
    padding-right:5px;
}

.tbackbtn{
        background: #2a2a2a;
    border-radius: 0px;
    color: #fff;
    border: 0px;
    padding: 5px 12px;
    font-size: 13px;
    position: absolute;
    top: 5px;
    right: 0px;
}


   .tbackbtn:hover, .tbackbtn:focus, .tbackbtn:visited, .tbackbtn:active{
     background   : #2a2a2a;
     border-radius: 0px;
     color        : #fff;
     border:0px;
 }


   .backbtn {
     background: #2a2a2a;
    border-radius: 0px;
    color: #fff;
    border: 0px;
    padding: 8px 12px;
    font-size: 13px;
 }


   .backbtn:hover, .backbtn:focus, .backbtn:visited, .backbtn:active{
     background   : #2a2a2a;
     border-radius: 0px;
     color        : #fff;
     border:0px;
 }





 /******************************************/
 /****   	 37. Responsive css   	   ****/
 /******************************************/

 @media only screen and (max-width: 1300px) {}

 @media only screen and (max-width: 1200px) {}

 @media only screen and (max-width: 1024px) {}

 @media only screen and (max-width: 991px) {}

 @media only screen and (max-width: 767px) {}

 @media only screen and (max-width: 575.98px) {}




 @media only screen and (max-width: 399.98px) {}



 @media only screen and (max-width: 319.98px) {}

 .matchitemimage img {
    max-height: 80px;
}

.match-item {
    min-height: 100px !important;
}