@font-face {
    font-family: HenrySans;
    src: url(../fonts/HenrySans-Regular.ttf);
  }
  @font-face {
    font-family: HenrySans-Bold;
    src: url(../fonts/HenrySans-Bold.ttf);
  }
  @font-face {
    font-family: HenrySans-Black;
    src: url(../fonts/HenrySans-Black.ttf);
  }
  @font-face{
    font-family: HenrySans-Light;
    src: url(../fonts/HenrySans-Light.ttf);
  }
  @font-face{
    font-family: HenrySans-Medium;
    src: url(../fonts/HenrySans-Medium.ttf);
  }


  :root {
      --smblue: #0030ff;
      --smblue0: rgba(0,48,255, 0.9);
      --smblue1: rgba(0,48,255, 0.6);
      --smred: #ff96a9;
      --smyellow: #ffdb00;
      --smlightblue: #96aaff;
      --smgreen: #98dad0;
      --smbabyblue: #e1f5ff;
      --smgray: #f5f5fa;
      --smerror: #e74c3c;
      --smgold: #f1c40f;
      --smsuccess: #4cd964;
      --smsuccess2: #07bc0c;
      --smgreen2: #a2f4de;
      --smred2: #ff2600;
      --smtd1: #e7e8ff;  
      --smtd2: #d0ccfc;
      --smgray2: #e7e8ff;
      --smbabyyellow:#fff8aa;
      --smpink:#ff8cac;
      --smbabypink:#ffced7;
      --smorange:#ff9d5c;
      --smblue3:#6ed5f6;
      --smorange2:#fe4a18;
      --smbabyorange:#fa9476;
      --smorange3:#ff9f00;

    --pink_d:#c15669;
    --pink_l:#ffd0d6;
    --yellow_d:#e89b12;
    --yellow_l:#fef7b4;
    --green_d:#246c63;
    --green_l:#b4f2df;
    --azure_d:#6051e3;
    --azure_l:#accaff;

    --pink_s: #ff96a9;
    --yellow_s: #ffdb00;
    --azure_s: #96aaff;
    --green_s: #98dad0;

    --header_height: 0px;
    --footer_height: 150px;
  }

  * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      font-family: HenrySans;

  }
  .blackFont{
    font-family: HenrySans-Black;
  }
  .lightFont{
    font-family: HenrySans-Light;
  }
  .boldFont{
    font-family: HenrySans-Bold;
  }
.mediumFont{
    font-family: HenrySans-Medium;
  }

  .pull-right{
      float:right;
  }

  input[type="time"] {
        border-radius:10px;
        outline:1px solid #D1D5DB;
        border:1px solid #D1D5DB;
    }

    hr{
        border-top:1px solid #D1D5DB;
    }

  a{
      text-decoration:none;
  }

  .required{
    /* border:1px solid var(--yellow_d) !important; */
    border:1px solid red !important;
    /* box-shadow:0px 0px 3px 0px var(--yellow_l) !important; */
    box-shadow:0px 0px 3px 0px red !important;
    /* background:var(--yellow_l) !important; */
    /* color:var(--smblue) !important; */
  }

  .main_container{
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
  }

  .main_content{
    height:100vh;
    width: 100vw;
    max-height:100vh;
    max-width: 100vw;
    background:#0030ff;
    /* background-image: url('../images/SMA1920x1237.jpg'); */
    background-image: url('../images/SM Retail HQ Facade_01.jpg');

    background-size: cover;
    background-position: center;
    position:fixed;
  }


  .login_form{
    background:rgba(255, 255, 255, .95);
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    /* backdrop-filter: blur(4px); */
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding:40px;
    border-radius:20px;
    width: 90vw;
    min-width: 300px;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow:0px 0px 20px 0px rgb(0 0 0 /50%);
  }


  .img_sma_logo{
    max-width:150px;
    content:url('../images/sm_black.png');
  }


  .login_ul li{
    list-style-type:none;
    font-size:10px;
  }
  .login_logo{
    text-align:center;
  }

  .login_input{
    color:#555;
    font-size:smaller;
    padding:10px 20px 10px 20px !important;
  }

  .login_link{
    color:#666;
    text-decoration: none;
  }
  .login_link:hover{
    color:#0030ff;
  }

  .link{
	font-family: "HenrySans-Bold";
	margin:6px 0px 6px 0px;
	text-decoration:none;
	cursor:pointer;
    color:#666;
}

.link:hover{
	color:var(--smorange2);
}

  .mb-page{
    margin-bottom: 6rem;
  }

/* The close_modal Button */
.close_modalxx {
    color: var(--smblue);
    float: right;
    position:relative;

    font-size: 14px;
    font-weight: bold;
    margin:0;
    padding:0;
    border-radius:20px;
    padding:2px 10px 2px 10px;
    margin-bottom:6px;
    cursor: pointer;
    text-decoration: none;
    background: white;
    box-shadow:0px 0px 10px 0px rgb(250 250 250 / 50%);
  }

  .close_modalxx:hover,
  .close_modalxx:focus {
    color: var(--pink_d);
    background: var(--pink_l);
    box-shadow:0px 0px 10px 0px rgb(255, 150, 169);
  }

  /* The Modal (background) */
  .modalxx {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99; /* Sit on top */
    padding-top: 0px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
     /* background-color: rgb(0,0,0);Fallback color */
    background-color: rgba(0, 0, 0, 0.6);  /*Black w/ opacity */
    backdrop-filter: blur(1px);

  }
  /* Modal Content */

  .modal-contentxx {
    background-color: #fefefe;
    /* background: none; rgba(0,48,255, 0.6); */
    margin: auto;
    padding: 10px 5px 0px 5px;
    border-radius:25px;
    border: 0px solid #0030ff;
    box-shadow:none;
    width: 95%;

    -webkit-animation-name: animatetop;
      -webkit-animation-duration: .5s;
    animation-name: animatetop;
    animation-duration: .5s;
    /*overflow-y:auto;*/
      position:relative;

  }

  .custom-modal .modal-contentxx {
    background-image: url('/path/to/your/image.jpg');
    background-size: cover; /* This ensures the image covers the entire modal */
    background-position: center; /* This centers the image in the modal */
    background-repeat: no-repeat; /* Prevents the image from repeating */
}

  .modal-content-lg{
      background:#fefefe;
      max-height: calc(100vh - 40px);
      overflow-y:auto;
      margin: auto;
      padding: 20px;
      border-radius:20px;
      margin-top:20px;
      width:90%;
      min-width:450px;
      box-shadow:0px 0px 10px 0px rgb(255 255 255 / 50%);
      font-family: "HenrySans-Bold";
      -webkit-animation-name: animatetop;
      -webkit-animation-duration: 1s;
      animation-name: animatetop;
      animation-duration: 1s;
      position:relative;
  }
  .modal-main{
      overflow-y:auto;
      max-height:calc(90vh - 40px);
      padding:12px 6px;
  }

  .modal-base{
      background:#fefefe;
      max-height:90vh;
      overflow:none;
      margin: auto;
      padding: 20px;
      border-radius:20px;
      margin-top:40px;
      /* top:50%; */
      /* max-width:50%; */
      max-width: 700px;
      width: 90vw;
      min-width:300px;
      box-shadow:0px 0px 10px 0px rgb(255 255 255 / 50%);
      font-family: "HenrySans-Bold";
      -webkit-animation-name: animatetop;
      -webkit-animation-duration: 1s;
      animation-name: animatetop;
      animation-duration: 1s;
      position:relative;
  }


  .modal-content2{
      background:#fefefe;
      max-height:90vh;
      overflow-y:auto;
      margin: auto;
      padding: 20px;
      border-radius:20px;
      margin-top:70px;
      /* top:50%; */
      /* max-width:50%; */
      max-width: 700px;
      width: 90vw;
      min-width:300px;
      box-shadow:0px 0px 10px 0px rgb(255 255 255 / 50%);
      font-family: "HenrySans-Bold";
      -webkit-animation-name: fadeIn;
      -webkit-animation-duration: 1s;
      animation-name: fadeIn;
      animation-duration: 1s;
      position:relative;
  }


  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
     /* padding-top: 10px; Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0, 0, 100, 0.7); /* Black w/ opacity */
  }


  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding:  20px ;
    border: 1px solid #888;
    width: 60%;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
  }


  @-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
  }


  @keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
  }



  /* The close_modal Button */
  .close_modal {
    color: #aaaaaa;
    float: right;
    font-size: 20px;
    font-weight: bold;
    margin:0;
    padding:0;
  }


  .close_modal:hover,
  .close_modal:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  /* END OF MODAL */

  .flipbook-container { width: 100%; }
  .flipbook-wrapper { width: 100%; display: flex; justify-content: center; align-items: center; }
  .flipbook { margin: 0 auto !important; box-sizing: border-box !important; max-width: 100% !important; }

  .turn, .turn-page-wrapper, .turn-page, .turnjs, .turn-wrapper, .page {
    margin: 0 auto !important;
    float: none !important;
    display: block !important;
  }

  .turn-viewport, .turn-page-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* @media (max-width: 767px) {
    .flipbook { width: 100% !important; height: auto !important; }
    .flipbook img { width: 100% !important; height: auto !important; object-fit: contain !important; }
    .turn, .turn-page-wrapper { display: block !important; }
  } */

  .flipbook, .turn, .turn-page-wrapper, .turn-viewport {
    transform-origin: center center !important;
    transform: none !important;
  }




  .header-main{
      position:relative;
      z-index:1;
      display: flex;
      background:var(--smblue);
      height:70px;
      justify-content: right;
  }


  .header-logo{
      display: flex;
      height:50px;
      width:auto;
      padding:0px 20px 0px 20px;
  }


  .header-items{
      display: flex;
      text-align:right;
      width:100%;
  }


  .header-nav-main{
      display: flex;
      text-align:right;
      margin-left: auto;
      margin-right:20px;


  }

  .header-sub-burger{
      display:block;
      color: white;
      background :var(--smblue);
      border:2px solid var(--smblue);
      border-radius:25px;
      padding:10px 15px 10px 15px;
      text-decoration:none;
      margin:2px;
  }


  .header-sub-burger:hover, .header-sub-burger:active{
      color: var(--smblue);
      background: white;
  }


  .header-burger{
      display:none;
  }
  /*
  .header-burger:hover .header-sub-burger{
      display:none;
      background: red;
  }*/
  .thumb_default{
    cursor:pointer;
}
.thumb_default{
    color:white;
    padding:2px 4px 2px 4px;
    border-radius: 3px;
}

.btn_comment:hover{
    color:#0030ff;
    background: white;
    padding:1px 5px 1px 5px;
}

.thumb_up:hover, .thumb_upx{
    color:#246c63;
    /*98dad0*/
    /*border:2px solid #b4f2df;*/
    background: #b4f2df;
}

.thumb_down:hover, .thumb_downx{
    color:#c15669;
    /*ff96a9*/
    /*border:2px solid #ffd0d6;*/
    background: #ffd0d6;
}
.thumb_comment2{
    color:white;
}

.thumb_comment:hover{
    color:blue;
    background: #fef7b4;
}

.thumb_comment:hover .thumb_comment2{
    color:#e89b12;
    background: #fef7b4;
}


.kb_badge_main:hover{

    box-shadow:0px 0px 10px 0px rgb(0 48 255 / 25%);
}

.kb_badge_main{

   background: none;
   color: var(--smblue);
   margin:6px 10px 6px 10px;
   border:1px solid var(--smgray);
   border-radius: 20px;

}

.kb_badge_num{
   padding:10px;
}

.kb_badge_detail{
   max-height: 100px;
   height: 100px;
   overflow:hidden;
   background:var(--smgray);
   padding:0px 6px 0px 6px;
   border-radius: 0px 0px 20px 20px;
}

.mtt_category{
    font-weight: bold;
    margin:10px;
}

.kb_badge_thumbnail{
   width:100%;
   text-align:center;
   /*border-radius:100px;*/
   overflow:hidden;
   display:flex;
   justify-content:center;
   /*min-width:200px;
   min-height:200px;
   background:red;*/
   padding-bottom:6px;
}


.kb_badge_thumbnail img{
   max-width: 100px;
   max-height: 142px;
}


.kb_badge_title{
   overflow:hidden;
   font-weight:bold;
   padding:4px 0px 4px 0px;
   text-align:center;
   font-family: "HenrySans-Black";
   color:var(--smblue);
   max-height: 50px;
}

.kb_badge_sub_title{
   color:var(--smblue);
   font-family: "HenrySans";
   overflow:hidden;
   text-align:center;
   font-size:10px;
   padding-bottom:4px;
}

.kb_badge_desc{
   color:#121212;
   overflow:hidden;
   font-size:10px;
   text-align:center;
}

.spn_omni_num{
	font-size:20px;
	background: var(--smyellow);
	padding:1px 10px 3px 10px;
	border-radius: 25px;
	font-weight: bold;
	color: var(--smblue);
	text-align:center;
	font-family: "HenrySans-Black";
}

  .anim_breath {
	animation: frame_breath 2s ease infinite;
  }

  @keyframes frame_breath {
        0%{
            color: white;
            background: var(--smblue);
        }
        50%{
            color: var(--smblue);
            background: white;
        }
        51%{
            color: white;
            background: var(--smblue);
        }

    }

    .spin {
        -webkit-animation:spin 10s linear infinite;
        -moz-animation:spin 10s linear infinite;
        animation:spin 10s linear infinite;
    }
    @-moz-keyframes spin {
        100% { -moz-transform: rotate(360deg); }
    }
    @-webkit-keyframes spin {
        100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes spin {
        100% {
            -webkit-transform: rotate(360deg);
            transform:rotate(360deg);
        }
    }

    .glow{
        -webkit-animation:glow 10s linear infinite;
        -moz-animation:glow 10s linear infinite;
        animation:glow 10s linear infinite;
    }

    @-moz-keyframes glow {
        0%{color:black}
        100% { color:yellow; }
    }
    @-webkit-keyframes glow {
        0%{color:black}
        100% { color:yellow; }
    }
    @keyframes glow {
        0%{color:black}
        100% { color:yellow; }
    }

    .swing {
        animation: anim_swing ease-in-out 2s infinite alternate;
        -webkit-animation: anim_swing ease-in-out 2s infinite alternate;
        -moz-animation: anim_swing ease-in-out 2s infinite alternate;
    }

    @-moz-keyframes anim_swing {
        0% { transform: rotate(12deg); }
        100% { transform: rotate(-50deg); }
    }
    @-webkit-keyframes anim_swing {
        0% { transform: rotate(12deg); }
        100% { transform: rotate(-50deg); }
    }

    @keyframes anim_swing {
        0% { transform: rotate(12deg); }
        100% { transform: rotate(-50deg); }
    }

    .animate-on-view {
    animation: fade-in-up 10s forwards; /* The 'forwards' fill-mode is important */
    animation-timeline: view(); /* This links the animation to the element's visibility */
    animation-range-start: entry 0%; /* Start when the element first enters the view */
    animation-range-end: cover 60%; /* Finish when 50% of the element is visible */
    }

    @keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
    }

    .floating {
        animation-name: floating;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        margin-left: 30px;
        margin-top: 5px;
    }

    @keyframes floating {
        0% { transform: translate(0,  0px); }
        50%  { transform: translate(0, 15px); }
        100%   { transform: translate(0, -0px); }
    }
.comment_box_azure{
    padding: 12px; 
    background: var(--azure_l); 
    border-radius: 12px; 
    /* margin-bottom:20px; */
    margin:2px;
    width:100%;
    outline:1px solid var(--azure_d);
}
.comment_box_green{
    padding: 12px; 
    background: var(--green_l); 
    border-radius: 12px; 
    /* margin-bottom:20px; */
    margin:2px;
    width:100%;
    outline:1px solid var(--green_d);
}
.comment_box_yellow{
    padding: 12px; 
    background: var(--yellow_l); 
    border-radius: 12px; 
    /* margin-bottom:20px; */
    margin:2px;
    width:100%;
    outline:1px solid var(--yellow_d);
}

.purple_bg:hover{
background: url('../images/purple-bg.png');
background-repeat: no-repeat; 
background-position: center; 
background-size: cover;
/* color:var(--smblue); */
}


.lgbt:hover{
    /* background-image: linear-gradient(45deg, var(--azure_s), var(--green_s), var(--yellow_s), var(--pink_s), var(--yellow_s), var(--green_s), var(--azure_s)) !important; */
    background-image: linear-gradient(45deg, var(--azure_s), var(--green_s), var(--azure_s)) !important;
    background-size: 400% 100%;
    /* animation: flowGradient 15s linear infinite; */
    animation: flowGradient 3s ease-in-out infinite;
    animation-direction:alternate-reverse;
}

@keyframes flowGradient {
  0% {
    background-position: 0% 50%; /* Start position */
  }
  100% {
    background-position: 100% 50%; /* End position, moving the gradient */
  }
}

@keyframes lgbtx {
    0%   { background-image: linear-gradient(to right, var(--azure_s), var(--green_s), var(--yellow_s), var(--pink_s));}
    25%  {
    background-image: linear-gradient(to right, var(--green_s), var(--yellow_s), var(--pink_s), var(--azure_s));}
    50%  {
    background-image: linear-gradient(to right, var(--yellow_s), var(--pink_s), var(--azure_s), var(--green_s));}
    100% {
    background-image: linear-gradient(to right, var(--pink_s), var(--azure_s), var(--green_s), var(--yellow_s));}
}


.panel-base{
    /* padding: 8px 10px; */
    background: var(--smtd1) ;   
    border-radius: 8px; 
    margin:0px 2px 8px 2px;
    width:100%;
    outline:1px solid var(--smtd2);
}
.panel-header{
    background:var(--smtd2);
    outline:1px solid var(--smtd2);
    border-radius: 8px 8px 0px 0px; 
    padding:8px 10px;
}
.panel-body{
    outline:1px solid var(--smtd2);
    padding:8px;
}
.panel-footer{
    outline:1px solid var(--smtd2);
    border-radius:  0px 0px 8px 8px; 
    padding:8px;
}

.panel{
    padding: 8px 10px; 
    background: rgb(245, 245, 250); 
    border-radius: 8px; 
    /* margin-bottom:20px; */
    margin:2px;
    width:100%;
}


.panel-limit{
    max-height: 600px;
    overflow: auto;
}



.cardx{
    padding: 12px; 
    background: var(--azure_s); 
    border-radius: 12px; 
    /* color: var(--green_d);  */
    /* color:white; */
    /* margin-bottom:20px; */
    margin:2px;
    width:100%;
}

/* .panel:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
} */


    .mtt_tools{
        text-align:right;
        padding:2px 8px;
    }

    .mtt_title{

        font-family: HenrySans-Light;
        white-space: nowrap;
        color: black;
        padding: 4px 8px 4px 8px;
        text-align:left;
        overflow:hidden;
        text-overflow: ellipsis;

    }

    /* .sma_logo:hover{ */
        /* transform:scale(1.1); */
        /* cursor:pointer; */
    /* } */
    .mtt_thumb{
        min-height: 150px;
        max-height: 150px;
        overflow:hidden;
        display : flex;
        align-items : center;

    }
    .mtt_cont{
        margin:6px 6px 20px 6px;
        background: #f5f5fa; /*#36454F*/
        border-radius: 8px;
        overflow:hidden;
    }
    .mtt_cont:hover{
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    }

    .mtt-btn-view{
        font-size:11px;
        font-family: HenrySans-Black;
        /* background:#accaff; */
        background:#0030ff;
        color:#ffffff;
        padding:4px 8px 4px 8px;
        margin:2px 2px 2px 2px;
        border-radius:8px;
        text-decoration: none;
        cursor: pointer;
        /* white-space: nowrap; */
        /* overflow: hidden; */
    }

    .mtt-btn-view:hover{
        /* background:#96aaff; */
        /* color:#0030ff; */
        /* background:#0030ff; */
        /* color:#ffffff; */
        background:linear-gradient(45deg, var(--smgreen2) ,var(--smbabyblue));
        color:var(--smblue);
        outline:0px solid #0030ff;

        /* animation: anim_bg .3s ease infinite; */
        /* box-shadow:0px 4px 4px 0px rgb(92, 91, 91); */
    }

    .mtt-btn-download{
        text-decoration: none;
        font-size:11px;
        font-family: HenrySans-Black;
        background:#ffffff;
        color:#0030ff;
        padding:4px 8px 4px 8px;
        margin:2px 2px 10px 2px;
        outline:1px solid #0030ff;
        border-radius:8px;
        cursor: pointer;
    }

    .mtt-btn-download:hover{
        /* background:#ff96a9; */
        /* color:#0030ff; */
        /* background: white; */
        background:linear-gradient(45deg, var(--smgreen2) ,var(--smbabyblue));
        color:var(--smblue);
        outline:0px solid #0030ff;
        /* box-shadow:0px 4px 4px 0px rgb(92, 91, 91); */
        /* border:2px solid #0030ff; */
    }


    .mtt_detl{
        margin:4px 8px 16px 8px;
        font-size:xx-small;
    }

  .header-nav2{
      display: flex;
      color:white;
      text-decoration:none;
      background:var(--smblue);
      border-radius:25px;
      margin:3px;
      padding:10px 15px 10px 15px;
      border:2px solid white;
  }

  .header-nav2:hover{
      display: flex;
      color:var(--smblue) ;
      text-decoration:none;
      background: white;
      border-radius:25px;
      margin:3px;
      padding:10px 15px 10px 15px;
      border:2px solid white;
      font-weight:bold;
  }

  .header-nav{
      display: flex;
      color:white;
      text-decoration:none;
      background:var(--smblue);
      border-radius:25px;
      margin:5px;
      padding:10px 15px 10px 15px;
      align-items: center;
      font-size: large;
      font-family: "HenrySans-Bold";
  }

  h1, h2, h3, h5, h6{
      font-family: "HenrySans-black";
  }

  b{
      font-family: "HenrySans-Bold";
  }

  .header-nav:hover, .header-nav-active{
      font-family: "HenrySans-Bold";
      display: flex;
      text-decoration:none;
      color:var(--smblue);
      background:white;
      font-weight:bold;
      border-radius:25px;
      margin:5px;
      padding:10px 15px 10px 15px;
      align-items: center;
  }

  .drop-down-sub{
      display:none;
  }

  .header-sub-nav{
      display:block;
      color: white;
      background :var(--smblue0);
      width:100%;
      border:2px solid var(--smblue);
      border-radius:25px;
      padding:10px 15px 10px 15px;
      text-decoration:none;
      margin:2px;


      font-family: "HenrySans-Bold";
  }


  .body-title{
      padding:15px;
      display:inline;
      text-align:center;
      width:100%;
      font-weight:bold;
  }






  .header-sub-nav:hover{
      font-weight:bold;
      border: 2px solid white;
      box-shadow:0px 0px 10px 0px rgb(00 48 255 / 50%);
      /*var(--smblue)*/
      background : white;
      color :var(--smblue);
  }


  .drop-down-main:hover .drop-down-sub, .drop-down-main:active .drop-down-sub{


      position:fixed;
      display:block;
      text-align:left;
      /*animation: fadeIn ease 1.5s;*/
  }


  (.footer)-main{
      display:flex;
      text-align:center;
      background:var(--smblue);


      width:100vw;
      height:30px;
      align-items: center;
      justify-content: right;
      padding:0px 20px 0px 20px;
      color:white;
      /*position:fixed;
      bottom:0px;*/
  }


  .body-main{
      z-index:0;
      min-height: calc(100vh - 80px);
      max-height: calc(100vh - 80px);
      overflow-y:auto;
      background:white;
      overflow-x:hidden;
      padding-bottom:20px;
      border-radius:25px;
  }


  body{
      overflow:hidden;
      /* background: var(--smblue); */
  }

  .module-main{


      /*
      box-shadow:0px 10px 30px 0px rgb(12 46 96 / 50%);#eee


      border:2px solid #eee;


      */
      margin-bottom:20px;
      border-radius:20px;
      padding:5px;
      background: var(--smbabyblue);
  }


  .module-main:hover{
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      background: var(--smbabyblue);
  }

  .module-logo{

      margin: 0 auto;
      width:200px;
      height:200px;

      /*background:var(--smblue);
      background:rgba(250,250,250,0);
      border:none;
      */

      border-radius:50%;
      box-shadow:0px 10px 30px 0px rgb(12 46 96 / 50%);
      margin-top:10px;
      overflow:hidden;

  }

  .module-logo1{

      display:flex;

      border-radius:100px;
      width:100%;
      min-height:200px;
      min-width:200px;
      background:white;
      /*border:2px solid white;*/
  }

  .module-detl{
      overflow:hidden;
      padding:15px;
      max-height:150px;
      min-height:150px;

  }

  .module-detl p{
      text-align: justify;
  }

  .module-footer{
      padding:10px;
      text-align:center;
  }

  .module-btn{
      /*
      margin-bottom: 20px;
      */
      display:flex;
      background:var(--smblue);
      color:white;
      font-weight:bold;
      padding:5px 10px 5px 10px;
      border-radius:20px;
      border:2px solid var(--smblue);
      justify-content: center;
  }

  .module-btn:hover{
      color:var(--smblue);
      background: white;
      border:2px solid white;
      box-shadow:0px 0px 10px 0px rgb(12 46 96 / 50%);
  }

  @keyframes fadeIn {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 1;
       }
  }

  .content_detail{
	max-height: 70px;
	height: 70px;
	overflow:hidden;

}

.content_main{

	background: none;
	color: var(--smblue);
	margin:6px 0px 6px 0px;
	/*border:1px solid #121212; 0 48 255 */
	padding:10px;
	border-radius: 20px;
	text-align:left;

}
.content_main:hover{
	background:var(--smgray);
	/*#ff96a9; f5f5fa smbabyblue*/
}
.content_name{
	overflow:hidden;
	font-weight:bold;
	padding:12px 5px 12px 5px;
	text-align:center;
	font-family: "HenrySans-Black";
	color:var(--smblue);
}

.content_thumbnail{

	width:100%;
	text-align:center;
	/*border-radius:100px;*/
	overflow:hidden;
	display:flex;
	justify-content:center;
	/* min-height:200px; */
	/* height:200px; */
}

.content_thumbnail img{
    aspect-ratio: 1 / 1;
	max-width:200px;
	max-height:200px;
}

.spn_main_num2{
	font-size:20px;
	/*background: var(--smgreen);*/
	background: var(--smblue);
	padding:1px 10px 3px 10px;
	border-radius: 25px;
	font-weight: bold;
	color: white;
	text-align:center;
	font-family: "HenrySans-Black";
}

.row{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
    /* margin-right: calc(-.5* var(--bs-gutter-x)); */
    /* margin-left: calc(-.5* var(--bs-gutter-x)); */

}

  .badge-main{
      /**/background:var(--smbabyblue);
      border-radius:20px;
      margin:20px;
      padding:12px;
  }

  .badge-main:hover{
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  }

  .badge-title{
      height:80px;
      max-height:80px;
      /*text-align:center;*/
      margin-top:10px;
      overflow:hidden;
  }

  .badge-title h6{
      font-weight:bold;
  }

  .badge-logo{
      padding:6px;
      /*background:green;*/
      display: flex;
      justify-content:center;
  }

  .spnClassType{
      color:var(--smblue);
      background: var(--smgreen);

      padding:2px 25px 2px 25px;
      border-radius:10px;

  }


  .badge-footer{
      text-align:center;
      margin:7px 0px 3px 0px ;
  }

  .badge-button{
      background:var(--smblue);
      color:white;
      font-weight:bold;
      padding:5px 10px 5px 10px;
      border-radius:20px;
      font-family: "HenrySans-Bold";
  }

  .badge-button:hover{
      background: var(--smred);
      color: var(--smblue);
      box-shadow:0px 0px 10px 0px rgb(250 250 250 / 50%);
      /*border:2px solid var(--smblue);

      box-shadow:0px 0px 30px 0px rgb(00 48 255 / 50%);*/
  }

  .badge-tab-active{
      /*background: var(--smblue);

      border-radius:25px 25px 0px 0px;*/
      padding:5px 0px 5px 0px;
      text-align:center;
      font-weight:bold;
      border-bottom:2px solid var(--smblue);
      color: var(--smblue);
      font-family: "HenrySans-Bold";
  }



  .badge-tab{
      background: white;
      border-radius:25px 25px 0px 0px;
      padding:5px 0px 5px 0px;
      text-align:center;
      font-weight:bold;
      border-bottom:2px solid #ccc;
      color: #aaa;
      font-family: "HenrySans-Bold";
  }


  .badge-tab:hover {
      border-radius:25px 25px 0px 0px;
      padding:5px 0px 5px 0px;
      text-align:center;
      border-bottom:2px solid var(--smblue);
      font-weight:bold;
      color: var(--smblue);
  }


  .profile-main2{
      padding: 12px;
      margin:12px 6px 12px 6px ;
      color:var(--smblue);
  }

  .profile-main{
      /*box-shadow:0px 0px 30px 0px rgb(12 46 96 / 50%);*/
      padding:12px;
      border-radius:20px;
      margin:12px 6px 12px 6px;
      /*background:var(--smbabyblue);*/
      color:var(--smblue);
  }

  .profile-sub{
      background:var(--smgray);
      padding:12px;
      border-radius:0px 0px 20px 20px;
      word-wrap: break-word;
  }

  .pic-main{
      display: flex;
      justify-content:center;
      background:var(--smgray);
      border-radius: 100%  100% 0px 0px;
      padding-bottom:12px;
  }

  .card-title{
      color: black;
      font-weight:bold;
      font-size:12px;
  }

  .profile_pic{
      overflow:hidden;
      box-shadow:0px 0px 12px 0px rgb(12 46 96 / 50%);
      border-radius:50%;
      max-width:250px;
  }

  .profile-btnSave{
      background:var(--smblue);
      color:white;
      font-weight:bold;
      padding:5px 25px 5px 25px;
      border-radius:20px;
      border:2px solid var(--smblue);


  }

  .profile-btnSave:hover{
      background:white ;
      color:var(--smblue);
      box-shadow:0px 0px 10px 0px rgb(0 48 255 / 50%);

      border:2px solid white;
  }

  #myBadge{
      min-height:250px;
  }


  .parameter-main{
      border-radius:20px;
      box-shadow:0px 0px 10px 0px rgb(12 46 96 / 50%);

  }

  .btn-login{
    margin:auto !important;
    display:block !important;
    width:50%;
    margin-bottom:10px !important;
  }

  .btn-blue{
      background:var(--smblue);
      color: white;
  }

  .btn-disabled{
    background: #e3e4db;
    color: #313638;
}

    .btn-green-blue{
        background:linear-gradient(45deg , var(--smgreen2), var(--smbabyblue));
        color:var(--smblue);        
    }
    .btn-green-blue:hover, .btn-green-blue:focus, .btn-green-blue:active, .btn-green-blue:focus-visible{
        background:linear-gradient(45deg, var(--smbabyblue), var(--smgreen2));

    }

  .btn-blue:hover, .btn-blue:focus, .btn-blue:active, .btn-blue:focus-visible{
    /* background:var(--smblue) !important; */
    /* color: white !important; */
    /* box-shadow:0px 0px 10px 0px rgb(0,63,255); */
    background:linear-gradient(45deg , var(--smgreen2), var(--smbabyblue));
    color:var(--smblue);
    /* background-size: 400% 100%;
    animation: flowGradient 6s ease-in-out infinite;
    animation-direction:alternate-reverse; */
  }


  .btn-red{
      background:var(--smred2);
      color: white;
  }
  .btn-red:hover, .btn-red:focus, .btn-red:active, .btn-red:focus-visible{
    background:var(--smred2) !important;
    color: white !important;
    box-shadow:0px 0px 10px 0px rgb(255, 0, 0);
  }

  /* .btn-icon{ */
  /* } */
  .btn-icon:hover{
    color:var(--smblue);
  }

    .btn-azure{
        background: var(--azure_l);
        color: var(--azure_d);
        border:1px solid  var(--azure_l);
        /* box-shadow:0px 0px 10px 0px gray; */
    }

  .btn-azure:hover{
        background: var(--azure_d) !important;
        color: var(--azure_l) !important;
        box-shadow:0px 0px 10px 0px var(--azure_l);
  }

  .btn-gray{
      background: var(--smgray2);
      color: var(--smblue);
      border:1px solid  var(--smgray2);
      /* box-shadow:0px 0px 10px 0px gray; */
  }

  .btn-gray:hover{
        background: var(--smgray2) !important;
        color: var(--smblue) !important;
        box-shadow:0px 0px 10px 0px gray;
  }


  .btn-blue, .btn-red,  .btn-gray, .btn-white, .btn-white-x, .btn-green, .btn-yellow, .btn-pink, .btn-yellow-o, .btn-disabled, .btn-azure, .btn-green-blue{
      border:none;
      box-sizing: border-box;
      display: inline-block;
      cursor: pointer;
      line-height: inherit;
      font-family: "HenrySans-Black";
      cursor:pointer;
      font-weight:bold;
      padding:6px 20px 6px 20px;
      border-radius:20px;
      margin:2px 3px 6px 3px;
      /* box-shadow:0px 0px 5px 0px #ffffff; */
      outline: none;
      min-width:fit-content !important;
      text-align: center;
  }

    .btn-white-x{
        background:white;
        color:  var(--smblue);
        outline: 0px solid var(--smblue);
    }

    .btn-white{
        background:white;
        color:  var(--smblue);
        outline: 1px solid var(--smblue);
    }

    .btn-white:hover, .btn-white:focus, .btn-white:active, .btn-white:focus-visible.btn-white-x:hover, .btn-white-x:focus, .btn-white-x:active, .btn-white-x:focus-visible{
     /* background:white !important; */
     /* color:  var(--smblue) !important; */
     /* box-shadow:0px 0px 10px 0px rgb(0,63,255) !important; */
     outline:none;
     background:linear-gradient(180deg, var(--green_l) ,var(--smbabyblue));
     color:var(--smblue);
    }

    .btn-azure{
        background:var(--azure_l);
        color: var(--azure_d);
        cursor:pointer;
    }
    .btn-azure:hover, .btn-azure:focus, .btn-azure:active, .btn-azure:focus-visible{

        background:linear-gradient(180deg, var(--azure_s) ,var(--azure_l));
        color:var(--smblue);
    }

  .btn-green{
      /* background:var(--smgreen2); */
      /* color: var(--smblue); */
      /* border:1px solid var(--smgreen2); */
      background:var(--green_l);
      color: var(--green_d);
      /* box-shadow:0px 0px 10px 0px rgb(152, 218, 208); */
      cursor:pointer;
  }

  .btn-green:hover, .btn-green:focus, .btn-green:active, .btn-green:focus-visible{
      /* background:white; */
      /* color: var(--smblue); */
      /* border:1px solid white; */
      /* box-shadow:0px 0px 10px 0px rgb(152, 218, 208); */
      background:linear-gradient(180deg, var(--green_l) , var(--green_s));
      color:var(--smblue);
  }

  .btn-pink{
      background:var(--pink_l);
      color: var(--pink_d);

  }
  .btn-pink:hover{
    background:linear-gradient(180deg, var(--pink_l) , var(--pink_s));
    color:var(--smblue);
  }

  /* .btn-yellow-o{
    border:1px solid var(--yellow_l);
    background:var(--smblue);
    color: var(--yellow_l);
  } */

  .btn-yellow{
      background:var(--yellow_l);
      color: var(--yellow_d);
      /* border:1px solid var(--smyellow); */
      /* box-shadow:0px 0px 10px 0px rgb(255, 219, 0); */
      /* cursor:pointer; */
  }

  .btn-yellow:hover{

    background:linear-gradient(180deg, var(--yellow_l) , var(--yellow_s));
    color:var(--smblue);

      /* background:white; */
      /* border:1px solid white; */
      /* box-shadow:0px 0px 10px 0px rgb(255, 219, 0); */
  }

  .btn-main{
      cursor:pointer;
      background:var(--smblue);
      color:white;
      font-weight:bold;
      padding:5px 10px 5px 10px;
      border-radius:20px;
      border:1px solid var(--smblue);
      margin:0px 3px 0px 3px;
      box-shadow:0px 0px 10px 0px rgb(00 48 255 / 50%);
      font-family: "HenrySans-Bold";
  }


  .btn-main:hover{
      background:var(--smlightblue);
      /* border:1px solid white;     */
  }


  .btn-sub{
      cursor:pointer;
      background: white;
      color:var(--smblue) ;
      font-weight:bold;
      padding:5px 10px 5px 10px;
      border-radius:20px;
      border:1px solid white;
      margin:0px 3px 0px 3px;
      box-shadow:0px 0px 10px 0px rgb(00 48 255 / 50%);/**/
      font-family: "HenrySans-Bold";
  }

  .btn-sub:hover{
      background: var(--smblue) ;
      color:white  ;
      border:1px solid var(--smblue);
      box-shadow:0px 0px 10px 0px rgb(00 48 255 / 50%);
  }

  .btn-mini{
      /*font-family: "HenrySans-Black";*/
      background:  var(--smblue);
      cursor:pointer;
      font-weight:bold;
      padding:0px 6px 3px 6px;
      border-radius: 20px;
      margin:3px;
      /* background: rgba(0,0,0,0) ; */
      color: white;
      border:none;
  }

  .btn-mini:hover{
      /* background:  var(--smblue); */
      background: white;
      color: var(--smblue);
      outline: 1px solid var(--smblue);
      box-shadow:0px 0px 4px 0px rgb(00 48 255 / 50%);
  }

    .spn_opt{
        padding: 3px 6px 3px 6px;
        border-radius:4px;
        display: inline-block;
        max-width:calc(100% - 50px);
    }
    .spn_opt:hover{
        color:#0030ff;
        font-family:HenrySans-bold;
    }
    .exam_opt{
        margin:8px;
    }
    .exam_opt:checked ~ .spn_opt {
        background: linear-gradient(45deg, #a2f4de,  #e1f5ff);
        color:#0030ff;
        font-family:HenrySans-bold;
        box-shadow:0px 0px 12px #a2f4de;
    }

    .totop{
        position:fixed;
        bottom:14px;
        right:14px;
        background:white;
        color:black;
        width:40px;
        height:40px;
        border-radius:50%;
        padding-top:10px;
        display:none;
        box-shadow:0px 0px 5px gray;
    }

    .totop:hover{
        background:#a2f4de;
        color:#0030ff;
    }

    .exam_file{
        max-width:750px;
        min-width:400px;
        width:80vw;
    }

    .div_base{
        background:#3c4142;
        height:100vh;
        overflow-y:scroll;
    }

    .div_form{
        color: black;
        background:  white;
        min-width:400px;
        max-width:800px;
        margin:auto;
        margin-top:30px;
        margin-bottom:60px;
        border-radius:3px;
        padding:30px 50px 30px 50px;
    }

    .exam_question_item{
        margin-top:30px;
    }

    .exam_option{
        padding:6px 40px 6px 40px;
    }
    .exam_question_figure{
        position: relative;
        float: left;width:30px;
    }
    .exam_question_desc{
        position: relative;
        float: left;
        width: calc(100% - 30px);
    }

    .exam_lbl_opt{
        font-family:HenrySans;
        cursor:pointer;
        margin:0px;
        display:flex;
    }

    .error, .error a{
        color:red;
        /* font-size: 10px; */
        /* font-size:smaller; */
        font-family: "HenrySans-Bold";
        /* background: red; */
        background: white;
        padding: 2px 8px;
        border-radius:8px;
    }

  .anc-sub{
      cursor:pointer;
      background: white;
      color:var(--smblue) ;
      font-weight:bold;
      padding: 8px 12px 8px 12px;
      border-radius:20px;
      font-family: "HenrySans-Bold";
      margin:0px 3px 0px 3px;
      box-shadow:0px 0px 10px 0px rgb(12 46 96 / 50%);/**/

  }
  .loader_l1 {
    border: 12px solid #f3f3f3;
    border-radius: 50%;
    border-top: 12px solid var(--azure_l);
    /* border-right: 12px solid var(--green_l); */
    /* border-bottom: 12px solid var(--pink_l); */
    /* border-left: 12px solid var(--yellow_l); */
    width: 35px;
    height: 35px;
    -webkit-animation: loader_l1 2s linear infinite;
    animation: loader_l1 2s linear infinite;
  }
  @-webkit-keyframes loader_l1 {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes loader_l1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .loader_l16 {
    height: 4px;
    width: 130px;
    --c:no-repeat linear-gradient(var(--smblue) 0 0);/*#6100ee*/
    background: var(--c),var(--c),var(--smbabyblue);/*#d7b8fc*/
    background-size: 60% 100%;
    animation: l16 3s infinite;
  }
  @keyframes l16 {
    0%   {background-position:-150% 0,-150% 0}
    66%  {background-position: 250% 0,-150% 0}
    100% {background-position: 250% 0, 250% 0}
  }

  /* HTML: <div class="loader"></div> */
.loader_l42 {
  height: 15px;
  aspect-ratio: 5;
  display: flex;
  justify-content: space-between;
    --_g: no-repeat radial-gradient(farthest-side,var(--green_s) 94%,#0000);
    --_a: no-repeat radial-gradient(farthest-side,var(--azure_s) 94%,#0000);
    --_y: no-repeat radial-gradient(farthest-side,var(--yellow_s) 94%,#0000);
    --_p: no-repeat radial-gradient(farthest-side,var(--pink_s) 94%,#0000);
  background: var(--_g), var(--_a);
  background-size: 20% 100%;
  animation: l42-0 1s infinite;
}
.loader_l42:before,
.loader_l42:after {
  content: "";
  height: inherit;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--_p), var(--_y);
  animation: l42-1 1s infinite; 
}
.loader_l42:after {
  --s:-1,-1;
}
@keyframes l42-0 {
  0%,
  60%  {background-position: calc(1*100%/3) 0, calc(2*100%/3) 0}
  100% {background-position: calc(0*100%/3) 0, calc(3*100%/3) 0}
}
@keyframes l42-1 {
  0%   {transform: scale(var(--s,1)) translate(0           ,0)}
  33%  {transform: scale(var(--s,1)) translate(0           ,130%)}
  66%  {transform: scale(var(--s,1)) translate(calc(400%/3),130%)}
  100% {transform: scale(var(--s,1)) translate(calc(400%/3),0)}
}

.loader_l32 {
  height: 15px;
  aspect-ratio: 5;
  display: grid;
  --_g: no-repeat radial-gradient(farthest-side,var(--green_s) 94%,#0000);
  --_a: no-repeat radial-gradient(farthest-side,var(--azure_s) 94%,#0000);
  --_y: no-repeat radial-gradient(farthest-side,var(--yellow_s) 94%,#0000);
  --_p: no-repeat radial-gradient(farthest-side,var(--pink_s) 94%,#0000);
}
.loader_l32:before,
.loader_l32:after {
  content: "";
  grid-area: 1/1;
  background:
    var(--_a) left,
    var(--_g) right;
  background-size: 20% 100%;
  animation: l32 1s infinite; 
}
.loader_l32:after { 
  background:
    var(--_y) calc(1*100%/3),
    var(--_p) calc(2*100%/3);
  background-size: 20% 100%;
  animation-direction: reverse;
}
@keyframes l32 {
  80%,100% {transform:rotate(.5turn)}
}

  /* HTML: <div class="loader"></div> */
    .loader_l34 {
    height: 15px;
    aspect-ratio: 4;
    display: grid;
    }
    .loader_l34:before,
    .loader_l34:after {
    content: "";
    grid-area: 1/1;
    --_g: no-repeat radial-gradient(farthest-side,var(--green_s) 94%,#0000);
    --_a: no-repeat radial-gradient(farthest-side,var(--azure_s) 94%,#0000);
    --_y: no-repeat radial-gradient(farthest-side,var(--yellow_s) 94%,#0000);
    --_p: no-repeat radial-gradient(farthest-side,var(--pink_s) 94%,#0000);
    background:
        var(--_g) left,
        var(--_a) right;
    background-size: 25% 100%;
    animation: l34 1s infinite; 
    transform: translate(var(--d,0)) rotate(0);
    }
    .loader_l34:after {
        --d: 37.5%;
        animation-delay: .5s;
    }
    @keyframes l34 {
    50%,100% {transform: translate(var(--d,0)) rotate(.5turn)}
    }

  .loader_l44 {
    height: 30px;
    aspect-ratio: 2.5;
    --_g: no-repeat radial-gradient(farthest-side,var(--green_s) 90%,#0000);
    --_g2: no-repeat radial-gradient(farthest-side,var(--yellow_s )90%,#0000);
    --_g3: no-repeat radial-gradient(farthest-side,var(--azure_s) 90%,#0000);
    --_g4: no-repeat radial-gradient(farthest-side,var(--pink_s) 90%,#0000);
    background: var(--_g), var(--_g2), var(--_g3), var(--_g4);
    background-size: 20% 50%;
    animation: l44 1s infinite linear alternate;
  }
  @keyframes l44 {
    0%,
    5%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    12.5% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    25%   {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
    37.5% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
    50%   {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 0   }
    62.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
    75%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
    87.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
    95%,
    100%  {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  }

  .loader_l7 {
    width: 50px;
    aspect-ratio: 1;
    --_c1:no-repeat radial-gradient(farthest-side,var(--green_s) 92%,#0000);
    --_c2:no-repeat radial-gradient(farthest-side,var(--yellow_s) 92%,#0000);
    --_c3:no-repeat radial-gradient(farthest-side,var(--azure_s) 92%,#0000);
    --_c4:no-repeat radial-gradient(farthest-side,var(--pink_s) 92%,#0000);
    background:
      var(--_c1) top,
      var(--_c2) left,
      var(--_c3) right,
      var(--_c4) bottom;
    background-size: 12px 12px;
    animation: l7 1s infinite;
  }
  @keyframes l7 {to{transform: rotate(.5turn)}}

  .anc-sub:hover{
      background: var(--smblue);
      color: white ;
      box-shadow:0px 0px 10px 0px rgb(12 46 96 / 50%)
  }

  .lamesa{
      min-width:100%;
      background:white;
      margin: 12px 0px 12px 0px;
      /*border:2px solid var(--smblue);*/
      border-radius:12px;
      padding:6px;

      /*box-shadow:0px 0px 10px 0px rgb(12 46 96 / 50%);*/
  }

  .lamesa thead td{
      font-weight:bold;
      background: #0030FF;
      color: white;
      border:1px solid #0030FF;
      padding:0px 2px 0px 2px;
      text-align:center;
  }
  .lamesa tbody td{
    padding:0px 2px 0px 2px;
  }
  .lamesa tbody tr:nth-child(odd){
    background: var(--smtd2);
    }
    .lamesa tbody tr:hover{
        background: var(--smgreen2) ;
        color: var(--smblue);
        font-weight:bold;
    }

  .lamesa thead tr{
      border-radius:12px;
  }

  .lamesa tbody td{
      border: 1px solid #0030FF;
      padding:0px 2px 0px 2px;
  }




  .lamesa2{
      min-width:100%;
      background: none;
      margin: 12px 0px 12px 0px;
      /*border:1px solid var(--smblue); */
      border-radius:12px;
      padding: 20px;
      color: black;
      /*color: var(--smblue); */
      /*box-shadow:0px 0px 10px 0px rgb(12 46 96 / 50%);*/
      border-spacing: 0px;
  }

  .lamesa2 tbody td{
      border:none;
  }

  .lamesa2 tbody td{
      border: 1px solid white;
      padding:0px 2px 0px 2px;
      text-align:center; /* */
      padding:3px;
      cursor: pointer;
  }

  .lamesa2 thead th{
      background: var(--smbabyblue);
      /*background:white;*/
      color: var(--smblue);
      border:1px solid white;
      padding:0px 2px 0px 2px;
      text-align:center;
      font-family: HenrySans-Bold;
      font-weight:bold;
      padding:3px;
  }

  .lamesa2 thead td, .thead{
      background: var(--smblue);
      /*background:white;*/
      color: white;
      border:1px solid white;
      padding:0px 2px 0px 2px;
      text-align:center;
      font-family: HenrySans-Bold;
      font-weight:bold;
      padding:3px;
  }

  .lamesa2 tbody tr{
      background: var(--smtd1);
  }

  .lamesa2 tbody tr:nth-child(odd){
      background: var(--smtd2); /*    */
  }

  .lamesa2 tbody tr:hover{
       /*background: var(--smlightblue);*/

       background: var(--smgreen2) ;
      color: var(--smblue);
       /*color: white;*/
      font-weight:bold;
  }

  .lamesa2 tbody tr:last-child, .lamesa2 tbody tr:last-child:hover {
      background: white;
  }
  .lamesa2 tbody tr td:last-child{
      text-align:left;
  }

  .is_answer{
    background:#ffdb00 ;
    color:#0030ff;
    font-weight:bold;
  }

  .exam_option{
    min-width: 60px;
  }


  .tbl_limit{
        cursor: pointer;
        border-radius:25px;
        color:#666;
        padding: 0px 25px 0px 10px;
        outline: none;
        border: 1px solid #ccc;
        max-width: fit-content;
        font-size: 12px;
  }


  .div_search_list, .div_selected_list{
    padding:8px;
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
  }

    .div_search_item{
        background:var(--azure_l);
        color:var(--azure_d);
        padding:1px;
        border-radius: 4px;
        margin-bottom:1px;
        font-size:11px;
        display: flex;
    }
    .div_selected_item{
        background:var(--green_l);
        color:var(--green_d);
        padding:1px;
        border-radius: 4px;
        margin-bottom:1px;
        font-size:11px;
        display: flex;
    }

    .lbl_flr{
        color:var(--smblue);
        font-family: HenrySans-Bold;
    }
    .lbl_flr_black{
        color: black;
        font-family: HenrySans-Bold;
    }

.highest{
    background:#98dad0;
    color:#0030ff;
    font-family: HenrySans-Bold;
}

.lowest{
    background:#ff96a9;
    color:#0030ff;
    font-family: HenrySans-Bold;
}


.table5{
	
	font-size: 10px;
	min-width:100%;
	background: none;
	margin: 16px 0px 16px 0px;
	/*border:1px solid var(--smblue); */
	/* border-radius:12px; */
	/* padding: 6px; */
	color: black;
	/*color: var(--smblue); */
	/*box-shadow:0px 0px 10px 0px rgb(12 46 96 / 50%);*/
	border-collapse: separate;
	border-spacing: 2px;
}



.table5 tbody td{
	border-bottom: 1px solid  white;
	border-left: 1px solid  white;
	/* padding:10px; */
	text-align:center; /* */
	/* padding:3px; */
    /* cursor: pointer; */
	
}


.table5 thead th{
	background: var(--smbabyblue);
	/*background:white;*/
	color: var(--smblue);
	border:1px solid white;
	/* padding:0px 2px 0px 2px; */
	text-align:center;
	font-family: HenrySans-Bold;
	font-weight:bold;
	/* padding:3px; */
}

.table5 thead td, .table5 tfoot td{
	background: var(--smblue);
	/*background:white;*/
	color: white;
	border:1px solid white;
	/* padding:0px 2px 0px 2px; */
	text-align:center;
	font-family: HenrySans-Bold;
	font-weight:bold;
	padding:4px;
}

.table5 tbody tr td{
	border:1px solid var(--smgray2);
	padding:4px;
}



.lbl_ecxc{
    cursor: pointer;
    /* width: 100%; */
    /* height: 100%; */
    display: block;
}

.lbl_ecxc1x{
    background:var(--pink_l);
    color:var(--pink_d);
    border:2px solid var(--pink_d) !important;
}
.lbl_ecxc2x{
    background:var(--yellow_l);
    color:var(--yellow_d);
    border:2px solid var(--yellow_d) !important;
}
.lbl_ecxc3x{
    background:var(--green_l);
    color:var(--green_d);
    border:2px solid var(--green_d) !important;
}

.rad_ecxc1{
    color: var(--pink_l);
}

.rad_ecxc1{
    color: var(--pink_d);
    border:2px solid var(--pink_d);
    box-shadow: 0px 0px 6px white !important;
}
.rad_ecxc2{
    color: var(--yellow_d);
    border:2px solid var(--yellow_d);
    box-shadow: 0px 0px 6px white !important;
}
.rad_ecxc3{
    color: var(--green_d);
    border:2px solid var(--green_d);
    box-shadow: 0px 0px 6px white !important;
}

.lbl_ecxc1:hover{
    background:var(--pink_l);
    /* border:1px solid var(--pink_s); */
    color: var(--pink_d);
    /* color: white; */
}
.lbl_ecxc2:hover{
    background:var(--yellow_l);
    /* border:1px solid var(--yellow_s); */
    color: var(--yellow_d);
    /* color: white; */
}
.lbl_ecxc3:hover{
    background:var(--green_l);
    /* border:1px solid var(--green_s); */
    color: var(--green_d);
    /* color: white; */
}

/* .rad_ecxc:checked +span { 
    color:var(--smblue); 
    font-family: HenrySans-Bold;
    font-weight:bold;
}  */


.hapag{
    min-width: 100%;
    background: none;
    margin: 12px 0px 12px 0px;
    /*border:1px solid var(--smblue); */
    padding: 0px 8px;
    /*color: var(--smblue); */
    /*box-shadow:0px 0px 10px 0px rgb(12 46 96 / 50%);*/
    border-spacing: 0px;
}

.hapag tbody td{
    border:none;
}



.hapag tbody td{
    border: 1px solid white;
    padding:0px 2px 0px 2px;
    padding:3px;
    /* cursor: pointer; */
}

.hapag thead th,  .hapag thead tr{
    
    background: var(--smbabyblue);
    /*background:white;*/
    color: var(--smblue);
    border:1px solid white;
    padding:0px 2px 0px 2px;
    text-align:center;
    font-family: HenrySans-Bold;
    font-weight:bold;
    padding:3px;
}

  .hapag thead td, .thead, .hapag thead tr th{
        background: var(--smblue);
        /*background:white;*/
        color: white;
        border:1px solid white;
        padding:0px 2px 0px 2px;
        text-align:center;
        font-family: HenrySans-Bold;
        font-weight:bold;
        padding:3px;
  }

  .hapag tbody tr{
    
        background: var(--smtd1);
  }

  .hapag tbody tr:nth-child(odd){
        background: var(--smtd2);
  }

  .hapag tbody tr:hover{
        /* background: var(--smgreen2) ; */
        /* background: #fef7b4 ; */
        /* color: var(--smblue); */
        /* font-weight:bold; */
        outline:3px solid var(--azure_d);
        /* border-radius: 20px; */
  }

  .hapag tfoot{
      /* background: white; */
      color: var(--smblue);
      text-align: center;

  }

  .hapag tfoot tr td{
        padding-top:4px;
        font-size: 12px;
  }




  button:focus{
      outline: none;
  }

  label{
      margin-top:12px;
  }

  .bold {
      font-weight: bold;
      font-family: HenrySans-Bold;
    }

  .btn_search_module{
      margin:30px 0px 30px 0px;
  }

  /* width */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }


  /* Track */
  ::-webkit-scrollbar-track {
    background: white;
    margin: 0px 20px;
    /* padding:2px; */
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    /* background: rgba(00, 48, 255, 0.2); */
    background: var(--azure_s);
    margin:20px 0px 20px 0px;
    border-radius:5px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    /* background: var(--smgreen2);#555;  smbabyblue smlightblue  smyellow smgreen */
    background: var(--azure_d);
    cursor:pointer;
  }

  .main_image{
      border-radius:25px;
      overflow:hidden;
      margin-top:12px;
      box-shadow:0px 0px 10px 0px rgb(12 46 96 / 50%);
  }

  .coursedetail{
      margin-top:12px;
      /*background:rgba(250, 250, 250, 0.7);*/
      padding:12px;
      border-radius:20px;
  }

  .coursedetail2{
      margin-top:20px;
      white-space:nowrap;
  }



  .color_red{
    color:red;
  }

.form-mini{
    padding:0px 6px 0px 6px;
    font-size:12px;
    /* max-width: 60px; */
    /* width:auto; */
    /* margin:2px; */
    border-radius:6px;
    outline: 1px solid var(--smblue);
}

.form-control[disabled], fieldset[disabled] .form-control{
    cursor:not-allowed;
}
    

  .form-control{
        cursor: pointer;
        border-radius:25px;
        color:#666;
        padding:6px 20px 6px 20px;
        outline: none;
        border: 1px solid #ccc;
        width: 100%;
        background:white;
      /* appearance:auto; */
  }


  .form-control:hover, .form-control:focus, .form-control:active, .form-control:focus-visible{
    box-shadow: 0px 0px 10px 0px #ccc;
    outline:none;
    outline-color:none;
    border:1px solid white;
  }
    .mini-select{
        font-size: 10px;
        line-height:.5rem; 
        width:26px;
        height:12px;
        border:0px black;
        padding:0px;
        margin:0px;
        color:white;
    }
    .mini-select:active, .mini-select:focus{
        color:black;
    }

    .btn_dropdown{
        cursor: pointer;
    }
    .btn_dropdown:hover{
        color:var(--smblue);
    }

    textarea.form-control{
        border-radius:12px;
        padding:8px 12px 8px 12px;
    }


    .file-input{
        padding:0px;
    }

    input[type=file]::file-selector-button {
        background-color: var(--smblue);
        /* padding: 2px; */
        padding:6px 14px;
        border-radius:20px;
        margin:4px;
    }
    
    input[type=file]::file-selector-button:hover {
        background-color: var(--smgreen2);
        color:var(--smblue);
        font-family: "henrysans-bold";
    }

  .drop_profile{
      position:fixed;
      right:10px;
  }

  form {
      width:100%;
  }

  .flat{
      margin-left:20px;
  }

  .container1{
      cursor: pointer;
  }

  .question{
      margin:20px;
  }

  .normal_text{
    color:black;
  }

  .bluetext{
      color:blue;
  }

  .blue{
      color:var(--smblue);
  }
  .red{
      color:var(--smred2);
  }
  .gray{
    color:#555;
    /* color:var(--smtd2); */
    
  }

  .lbl_capslock{
    color:var(--smred2);
    width: 100%;
    text-align: center;
    font-family: "henrysans-bold";
    display:none;
  }

  
  .textcenter{
    text-align:center !important;
  }
  .textleft{
    text-align:left !important;
  }
  .textright{
    text-align:right !important;
  }

  .green{
      color:var(--smgreen);
  }
  .green_d{
      color:var(--green_d);
  }
  

  @media (max-width: 800px){

      .header-nav-main{
          display:none;
      }

      .header-items{
          display:block;
          position:fixed;
          width:auto;
          right:0;
      }
      .header-burger{
          display:block;
      }


      .header-items:hover .header-nav-main{
          display:block;
          position:fixed;
          top:50px;
          right:0px;
          background:var(--smblue0);
          width:60%;
          margin:0px;
          height:100vh;
      }

      .header-sub-nav, .header-nav, .header-nav-active{
          font-family: "HenrySans-Bold";
      }

      .header-items:hover{
          display:block;
      }
      .drop-down-main:hover .drop-down-sub{
          display:block;
          position:relative;
      }


      .drop-down-sub{
          /*display:block;*/
          text-align:left;
      }

      .header-sub-nav{
          width:auto;
          /*margin:2px;*/
          margin: 5px 5px 5px 30px;
      }

      .header-sub-nav:hover{
          box-shadow:none;
      }

      .body-main{
          overflow-x:auto;
      }

      .drop_profile{
          position:relative;
          right:0px;
      }

  }

  .month_main_cont{

      margin-top: 20px;
      margin-bottom: 20px;
      /*background: green; */
      border-radius: 25px;

  }


  .badge-azure{
    font-family: HenrySans-Bold;
    background: var(--azure_l);
    color:  var(--azure_d);
    padding:2px 6px 2px 6px;
    font-weight:bold;
    border-radius: 5px;
  }

  .badge-azure-o{
    font-family: HenrySans-Bold;
    background: var(--azure_l);
    color:  var(--smblue);
    padding:2px 6px 2px 6px;
    font-weight:bold;
    border-radius: 5px;
  }
  
  .badge-green-o{
    font-family: HenrySans-Bold;
    /* background: white; */
    background : var(--green_l);
    /* background: #e7e8ff; */
    color :  var(--smblue);
    padding:2px 6px 2px 6px;
    font-weight:bold;
    border-radius: 5px;
  }
  
  .badge-green-x{
    font-family: HenrySans-Bold;
    /* background: white; */
    color : var(--green_l);
    /* background: #e7e8ff; */
    background:  var(--smblue);
    padding:2px 6px 2px 6px;
    font-weight:bold;
    border-radius: 5px;
  }

  .badge-green{
      font-family: HenrySans-Bold;
      background: var(--green_l);
      color:  var(--green_d);
      padding:2px 6px 2px 6px;
      font-weight:bold;
      border-radius: 5px;

  }


    /* smgray2  smtd1 */
.badge-gray{
    font-family: HenrySans-Bold;
    background: var(--smgray);
    color:  gray;
    padding:2px 6px 2px 6px;
    font-weight:bold;
    border-radius: 5px;
}

.badge-gray-o{
    font-family: HenrySans-Bold;
    background: var(--smgray);
    color:  var(--smblue);
    padding:2px 6px 2px 6px;
    font-weight:bold;
    border-radius: 5px;
}
  .badge-yellow{
    font-family: HenrySans-Bold;
    background: var(--yellow_l);
    color: var(--yellow_d);
    border-radius: 5px;
    padding:2px 6px 2px 6px;
    font-weight:bold;
}

.badge-yellow-o{
    font-family: HenrySans-Bold;
    background:  var(--yellow_l);
    /* background: #e7e8ff; */
    color:  var(--smblue);
    padding:2px 6px 2px 6px;
    font-weight:bold;
    border-radius: 5px;
  }

.badge-yellow-x{
  font-family: HenrySans-Bold;
  /* background:  var(--yellow_s); */
  /* background: #e7e8ff; */
  /* color:  var(--smblue); */
  color:  var(--yellow_s);
  background:  var(--smblue);
  padding:2px 6px 2px 6px;
  font-weight:bold;
  border-radius: 5px;
}


.badge-babyblue{
    font-family: HenrySans-Bold;
    background: var(--smbabyblue);
    color: var(--smblue);
    border-radius: 5px;
    padding:2px 6px 2px 6px;
    font-weight:bold;
}

.badge-orange-o{
    font-family: HenrySans-Bold;
    background: var(--smorange);
    /* color: var(--smorange2); */
    color:var(--smblue);
    border-radius: 5px;
    padding:2px 6px 2px 6px;
    font-weight:bold;
}

.badge-orange{
    font-family: HenrySans-Bold;
    background: var(--smorange2);
    /* color: var(--smorange2); */
    color: white;
    border-radius: 5px;
    padding:2px 6px 2px 6px;
    font-weight:bold;
}
.badge-white{
    font-family: HenrySans-Bold;
    background: white ;
    color: #0030ff;
    border-radius: 5px;
    padding:2px 6px 2px 6px;
    font-weight:bold;
}
.badge-blue{
    font-family: HenrySans-Bold;
    background: #0030ff;
    color: white;
    border-radius: 5px;
    padding:2px 6px 2px 6px;
    font-weight:bold;
}
  .badge-red{
    font-family: HenrySans-Bold;
    background: var(--smred2);
    color: white;
    border-radius: 5px;
    padding:2px 6px 2px 6px;
    font-weight:bold;
}

.truncated-label {
  display: inline-block;       /* Allows the element to respect width and max-width */
  max-width: 200px;            /* Set your desired maximum width limit */
  white-space: nowrap;         /* Forces the text to stay on a single line */
  overflow: hidden;            /* Hides the text that spills past the max-width */
  text-overflow: ellipsis;     /* Adds the "..." three-dot truncation graphic */
}

 .badge-redonwhite{
    font-family: HenrySans-Bold;
    background: white;
    color: var(--smred2);
    border-radius: 5px;
    padding:2px 6px 2px 6px;
    font-weight:bold;
}

.badge-pink-o{
      font-family: HenrySans-Bold;
      background: var(--pink_l);
      color: var(--smblue);
      border-radius: 5px;
      padding:2px 6px 2px 6px;
      font-weight:bold;
  }

  
  .badge-pink{
      font-family: HenrySans-Bold;
      background: var(--pink_l);
      color: var(--pink_d);
      border-radius: 5px;
      padding:2px 6px 2px 6px;
      font-weight:bold;
  }
  .month_cont{
      text-align: center;
      border-radius: 25px 25px 0px 0px;
      background: var(--smgreen2);
      color: var(--smblue);
      font-family: "HenrySans-Bold";
      font-size:25px;
      margin: 0px;
      padding: 0px;

      /*box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
      border-radius: 5px;
      padding: 20px;  #d9534f;
      border: solid 1px black;
      margin-top:50px;*/

  }

  .hl-yellow{
    background:  var(--yellow_l);
  }
  .group_main_cont{

      /*background: pink;
      border: 1px solid grey;
      border-top: none;*/
      border-radius: 0 0 10px 10px;
      padding-bottom:20px;
      box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
  }
  .spnNofile{
      color:gray;
      font-family: "HenrySans-Bold";
  }

  .file_group_cont{

      margin-top:10px;
      padding:10px;
      text-align:left;
  }

  .file_group_cont2{
      margin-top:10px;
      padding:10px;
      background:blue;
      width:100px;
      color:white;
  }

  .ribbon{
      background: white;
      color: var(--smblue) ;
      font-family: "HenrySans-Bold";
      font-size: 25px;
  }

  .ribbon2{
      --f: 15px; /* control the folded part*/
      --r: 15px; /* control the ribbon shape */
      --l: 35px; /* the left offset */

      position: relative;
      inset: auto  auto auto calc(-1 * var(--l));

      padding: 5px 0 var(--f) calc(15px + var(--f));

      background: var(--smblue); /*#0063ff;*/
      color: white;
      font-weight: bold;
      clip-path:
      polygon(
      0 0,
      35% 0,
      calc(35% - var(--r)) 40%,
      35% 80%,
      15px 80%,
      15px 100%,
      0 80%
      );
      box-shadow: 0 0 10px 0 inset #0005;
  }

  .file_title{
      font-family: "HenrySans";
      white-space: nowrap;
      color: white;
      padding: 4px;
      text-align:center;
      overflow:hidden;
      text-overflow: ellipsis;
  }

  .content_views{
      color:white;
      font-size: 10px;
      text-align:left;
      padding: 4px;
  }

  .div_rmv{
      text-align: center;
      margin: 0;
      padding: 0;
  }

  .title_main_off{
      background: #96aaff;
      padding-right: 0;
  }

  .file_cont3{
      height:225px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .file_cont2{
      text-align:center;
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
      margin:10px;
      background: #36454F;
      border-radius: 10px;
  }

  .title_header{
	font-size:25px;
	font-weight:bold;
	color: var(--smblue);
	font-family: "HenrySans-Black";
}
.spn_main_num{
	font-size:25px;
	background: var(--smred);
	padding:8px 18px 10px 18px;
	border-radius:25px;
	font-weight:bold;
	color: var(--smblue);
	text-align:center;
	font-family: "HenrySans-Black";
}
.sub_content{
	color: var(--smblue);
	font-family: "HenrySans-Black";
	font-weight:bold;
	font-size:20px;
    margin:20px 0px 20px 0px;
}
.sub_content_div{
	padding:12px;
	margin-bottom:20px;
}
  .emptylist{
    font-size:xx-large;
    font-weight:bold;
    font-family: HenrySans-Black;
    color:gray
 }

 .spn_sub_num{
	font-family: "HenrySans-Black";
	background: var(--smyellow);
	padding:4px 8px 6px 10px;
	border-radius:25px;
	font-weight:bold;
	color: var(--smblue);
	text-align:center;
    font-size:20px;
}

.spn_sub_num_disable{
    font-size:20px;
	font-family: "HenrySans-Black";
	background: var(--smgray);
	padding:8px 10px 10px 10px;
	border-radius:25px;
	font-weight:bold;
	color: #ccc;
	text-align:center;
}


.omni_sub_content_item{
    /* background: white; */
	text-align:center;
	color: var(--smblue);
	margin:6px;
	padding:6px 12px 6px 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
	/* box-shadow:0px 0px 10px 0px rgb(12 46 96 / 50%); */
}

.omni_sub_content_item:hover, .omni_sub_content_item_o:hover, .omni_sub_content_item_x:hover{
    transform:scale(1.1);
	font-weight:bold;
}

.omni_sub_content_item_o{
    text-align:center;
	/* background: white; */
	color: var(--smblue);
	font-weight:bold;
	margin:6px;
	padding:6px 12px 6px 12px;
    /* border:1px solid #ccc; */
    text-overflow: ellipsis;
    white-space: nowrap;
}

.omni_sub_content_item_x{
    text-align:center;
	/* background: white; */
	color: gray;
	margin:6px;
	padding:6px 12px 6px 12px;
	cursor:not-allowed;
    opacity: 0.5;
    filter: grayscale(100%);
    /* min-width: fit-content; */
    text-overflow: ellipsis;
    white-space: nowrap;
}


.wiggle{
	animation: anim_wiggle 2s ease infinite;

}

@keyframes anim_wiggle {
    40%, 60% { transform: rotate(-3deg); }
	50% { transform: rotate(3deg);}
	60% { transform: rotate(0deg);}
}

@keyframes anim_bg {

    0% {background:linear-gradient(45deg, var(--smgreen2) ,var(--smlightblue)); }
	50% { background:linear-gradient(45deg, var(--smlightblue) ,var(--smgreen2), var(--smlightblue));}
    80% {background:linear-gradient(45deg, var(--smlightblue) ,var(--smgreen2));}

    100% {background:linear-gradient(45deg, var(--smgreen2) ,var(--smlightblue)); }

}

.sub_content_item{
	background: var(--smblue);
	text-align:center;
	color: white;
	margin:6px;
	padding:6px 12px 6px 12px;
	border-radius:25px;
	box-shadow:0px 0px 10px 0px rgb(12 46 96 / 50%);
    /* min-width: fit-content; */
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sub_content_item_o{
	text-align:center;
	background: white;
	color: var(--smblue);
	font-weight:bold;
	margin:6px;
	padding:6px 12px 6px 12px;
	border-radius:25px;
    border:1px solid #ccc;
    text-overflow: ellipsis;
    white-space: nowrap;

}

.sub_content_item_x{
	background: var(--smblue);
    text-align:center;
	color: white;
	margin:6px;
	padding:6px 12px 6px 12px;
	cursor:not-allowed;
    opacity: 0.5;
	border-radius:25px;
    filter: grayscale(30%);
    /* min-width: fit-content; */
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grey-text{
	color: #808080 !important;
}
.grey-bg{
    background: #808080 !important;
}

.grey-cursor{
	cursor:not-allowed;
}

.grey-img{
	filter: grayscale(100%);
}

.disabled{
	color:#ccc;
}

.sub_topic_div{
    width: 100%;
}

.sub_content_item:hover, .sub_content_item:focus, .sub_content_item2:hover{
	background: white;
	color: var(--smblue);
	font-weight:bold;
	box-shadow:0px 0px 10px 0px rgb(00 48 255 / 50%);
}

.sub_topic{
    color:var(--smblue);
    font-family: "HenrySans-Black";
    font-size:20px;
}

 .title_sub_header{
	margin:10px 0px 20px 0px ;
	font-weight:Normal ;
    color:#73879C;
}
 .spn-blue{
     font-weight:bold;
     color:var(--smblue);
     font-family: "HenrySans-Black";
 }

.alert_flash_close{
    font-size:5px;
    float:right;
    margin-right:-8px;
}

.alert_flash, .alert_flash2{
    /* position: fixed;
    z-index: 99;
    background:red;
    color:white;
    width:200px;
    left: 0;
    top: 20px; */

    margin:6px;
    padding:12px 20px;
    border-radius:6px;

    position: fixed;
    z-index: 99;
    background:red;
    color:white;
    width:200px;
    top: 76px;
    right: 12px;
    animation: alert_box 2s ease ;
  }

    .alert{
    
    margin:12px 0px;
    width:100%;
    padding:12px 20px;
    border-radius:6px;
    
    }

    @keyframes alert_box {
        0% {
            opacity: 0;
            /* right: -200px; */
        }
        50% {
            opacity: 1;
            /* right: 12px; */
        }
    }


 .alert-success{
    background: var(--green_l);
    color: var(--green_d);
    outline:1px solid var(--green_s);
 }
 .alert-danger{
    background: var(--pink_l);
    color: var(--pink_d);
    outline:1px solid var(--pink_s);
 }

 .alert-warning{
    background: var(--yellow_l);
    color: var(--yellow_d);
    outline:1px solid var(--yellow_s);
 }
 .alert-info{
    background: var(--azure_l);
    color: var(--azure_d);
    outline:1px solid var(--azure_s);
 }

.btn-mini-azure{
    font-size:0.7rem;
    padding:3px 6px 3px 6px !important;
    margin:0px !important;
    aspect-ratio: 1;
    min-width: 22px;
    background: var(--azure_l);
    color: #0030ff;
}

.btn-mini-azure:hover{
    background: white;
    color:#0030ff;
    outline:1px solid #0030ff;
  }

  .btn-mini-clear{
    font-size:0.7rem;
    padding:3px 6px 3px 6px !important;
    margin:0px !important;
    aspect-ratio: 1;
    min-width: 22px;
    background:#0030ff;
    color: white;
  }

  .btn-mini-clear:hover{
    background: white;
    color:#0030ff;
    outline:1px solid #0030ff;
  }

  .btn-mini-cancel{
    font-size:0.7rem;
    padding:3px 6px 3px 6px !important;
    margin:0px !important;
    aspect-ratio: 1;
    min-width: 22px;
    background:var(--smred2);
    color: white;
  }
  .btn-mini-cancel:hover{
    background: white;
    color:var(--smred2);
    outline:1px solid var(--smred2);
  }

  .btn-mini-white-o{
    background:white;
    /* color: black; */
    /* font-size:1rem; */
    outline:1px solid #0030ff;
 }
 .btn-mini-white-o:hover{
    background:blue;
    color:white;
 }

 .btn-mini-white{
    background:white;
    color: black;
    font-size:1rem;
 }
 .btn-mini-white:hover{
    background:blue;
    color:white;
    outline:1px solid #0030ff;
 }
 .btn-mini-green{
    background:var(--green_l);
    color:var(--green_d);
 }
 .btn-mini-green:hover{
    background:var(--green_d);
    color:var(--green_l);
 }
 .btn-mini-yellow{
    background:var(--yellow_l);
    color:var(--yellow_d);
 }

 .btn-mini-yellow:hover{
    background:var(--yellow_d);
    color:var(--yellow_l);
 }
 .btn-mini-pink{
    background:var(--pink_d);
    color:var(--pink_l);
    /* color: white; */
 }

 .btn-mini-pink:hover{
    /* background:var(--pink_s); */
    background: white;
    color:var(--pink_d);
    outline: 1px solid var(--pink_d);
 }

 .btn-mini-red{
    background:var(--smred2);
    color: white;
    font-size:1rem !important;
    /* color: white; */
 }

 .btn-mini-red:hover{
    /* background:var(--pink_s); */
    background: white;
    color:var(--smred2);
    outline: 1px solid var(--smred2);
 }

 .btn-mini-green, .btn-mini-pink, .btn-mini-yellow, .btn-mini-red, .btn-mini-white, .btn-mini-white-o, .btn-mini-clear, .btn-mini-cancel, .btn-mini-azure{
    cursor:pointer;
    font-weight:bold;
    padding:0px 6px 0px 6px;
    border-radius: 20px;
    margin:1px;
    border:none;
    /* font-size:12px; */
 }

 /* .btn-mini-green:hover, .btn-mini-pink:hover, .btn-mini-yellow:hover{
    background:white;
 } */



 .btn_back{
	font-size:26px;
}

.btn_back:hover{
	color:#0030ff;
}

  .btn-view{
      background: var(--smgreen);
      color: var(--smblue);
      text-decoration:none;
      font-size:14px;
      padding:6px;
      border-radius:12px;
      font-family: "HenrySans-Bold";
  }

  .btn-view:hover, .btn-view:focus, .btn-view:active{
      color: var(--smblue);
      background: white;
      text-decoration:none;
  }


  .btn-download{
      background: var(--smred);
      color: var(--smblue);
      text-decoration:none;
      font-size:14px;
      padding:6px;
      border-radius:12px;
      font-family: "HenrySans-Bold";
  }


  .btn-download:hover, .btn-download:focus, .btn-download:active{
      color: var(--smblue);
      background: white;
      text-decoration:none;
  }

  .file_cont{

      /*text-align:center;
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
      margin:10px;
      background: #36454F;
      padding:10px;
      padding:0px;

      border-radius: 10px;
      border:1px solid var(--smlightblue);*/
      transition: transform .5s;
  }
  .file_cont:hover{
      /*box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);*/
      transform: scale(1.02);
  }

  .modal_header2{
      color: blue;
      height:50px;
      max-height:50px;
      padding: 5px;
  }

  .modal_title{
    color:white;
    background:rgba(47, 47, 47, 0.95);
    padding:5px 10px 5px 10px;
    border-radius:6px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .close_modal2, .download_modal{
      text-align:center;
      margin: 0px 5px 0px 5px;
      float: right;
      font-size: 25px;
      padding: 0px 5px  0px 5px;
      cursor: pointer;
      text-decoration: none;
      color: white;
  }

  .close_modal2{
      color: var(--smred2);
  }

  .close_modal2:hover,
  .close_modal2:focus {
      color: white;
  }

  .download_modal{
      color: var(--smgreen2);
      font-size: 22px;
  }

  .download_modal:hover,
  .download_modal:focus{
      color: white;
  }

  .smlogo{
      margin-top:-5px;
      height: 50px;
      margin-left: 10px;
  }


    .div_dark_toggle{
        position:absolute;
        /* background:rgba(255, 255, 255, .5); */
        /* background:rgba(0, 0, 0, .5); */
        /* background:rgba(0, 0, 0, 1); */
        background:white;
        top:17px;
        right:0px;
        width:30px;
        height:30px;
        z-index:51;
        padding:4px 8px 4px 8px;
        border-radius:6px 0px 0px 6px;
    }


    .ia_fb_text, .ia_instruct{
        color:#000;
    }

    .btn-tbl-page{
        padding:2px 10px 2px 10px;
        border-radius: 18px;
        margin:2px 3px 6px 3px;
        font-size: 14px;
    }

    select.form-control{
        background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e") !important;
        background-size:0.75em 0.75em;
        background-repeat:no-repeat;
        background-position:right 0.75rem center;
    }

    /*gago*/
    /* @media (prefers-color-scheme: dark) { */
    [data-theme="dark"] {

        .table5{
            color:white;
            background: #253037;
        }
        .table5 thead th, .table5 thead td, .table5 tbody td, .table5 tfoot td{
            border:1px solid black;
        }

        .exam_main{
            color:white;
        }

        
        .panel{
            background:#2f2f2f;
        }
        .lbl_flr, .lbl_flr_black{
            color: white;
        }
        .hapag tbody{
            color:white;
        }

        .hapag tbody td{
            border: 1px solid black;
            /* color:white; */
        }

        .hapag thead th{
            background: var(--smbabyblue);
            /*background:white;*/
            color: var(--smblue);
            border:1px solid black;
        }
        .hapag thead td, .thead, .hapag thead tr th{
              background: var(--smblue);
              /*background:white;*/
              /* color: white; */
              border:1px solid black;
        }
        .hapag thead tr th{
            color: white;
        }

        .hapag tbody tr{
              /* background: var(--smtd1); */

              background: #36454F;

        }
        .lamesa tbody tr{
            background: #36454F;
        }

        .lamesa tbody td{
            border: 1px solid #36454F;
            padding:0px 2px 0px 2px;
        }
        .modal-content2{
            background:#2f2f2f;
            box-shadow:0px 0px 10px 0px rgba(8, 8, 8, 0.5);
        }

        .hapag tbody tr:nth-child(odd){
              /* background: var(--smtd2); */
            background: #2f2f2f;
        }

        .lamesa tbody tr:nth-child(odd){
            background: #2f2f2f;
        }

        .hapag tbody tr:hover{
              /* background: var(--azure_s) ; */
              background:var(--azure_l);
              /* color: var(--smblue); */
              /* color: ; */
        }


        .hapag tfoot{
            /* background: white; */
            color: white;
        }

        

        .btn-blue, .btn-red,  .btn-gray, .btn-white, .btn-green, .btn-yellow, .btn-disabled{
            box-shadow:0px 0px 5px 0px #202020;
        }
        .btn-white{
            outline: none;
        }


        .spn_sub_num_disable{

            background: #2f2f2f;
        }


        ::-webkit-calendar-picker-indicator {
            filter: invert(1);
        }

        /*dark*/

         .omni_sub_content_item_o, .blue, .sub_content, .title_header, .omni_sub_content_item, .spn-blue, .content_name {
            /* color:white; */
            /* color: var(--azure_l); */
            color: #36c;
            color: var(--smblue);
            /* color: var(--green_l); */
        }

        .sub_content_item_o{
            color: var(--azure_d);
        }

        .ia_fb_text, .ia_instruct, .normal_text, .modal_header{
            color:white;
        }
        .title_sub_header{
            color:#ccc;
        }
        .btn_back{
            color: white;
        }
        .content_main:hover{
            background: #2f2f2f;
            /*#ff96a9; f5f5fa smbabyblue*/
        }

        .login_link{
          color:#fffcfc;
        }

        .login_link:hover{
            text-decoration: underline;
        }

        .login_form{
            background:rgba(0, 0, 0, .9);
            color: white;
        }
        .img_sma_logo{
            content:url('../images/sm_white.png');
        }

        .tbl_limit{
            background:#2f2f2f;
            color:#dbdbdb;
            outline:none;
            border:1px solid black;
            background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e");
            background-size:0.75em 0.75em;
            background-repeat:no-repeat;
            background-position:right 0.75rem center;

        }

        .form-control{

            background:#36454F;
            outline:none;
            border:1px solid #36454F;
            color:#dbdbdb;
            /* color:wheat; */
        }

        select.form-control{
            background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e") !important;
            background-size:0.75em 0.75em;
            background-repeat:no-repeat;
            background-position:right 0.75rem center;
        }

        .form-control::placeholder {
            color: #ccc;
        }
        .form-control:hover, .form-control:focus, .form-control:active, .form-control:focus-visible{
            box-shadow: 0px 0px 10px 0px #000000 ;
            outline:none;
            outline-color:none;
            border:1px solid rgb(0, 0, 0) ;
            /* background:#36454F; */
            color:white;
        }
        .main_content{
            background-image: url('../images/SM Retail HQ Facade_02.jpg');
        }


        .div_dark_toggle{
            /* background:rgba(0, 0, 0, .5); */
            background:rgba(0, 0, 0, 1);
        }

        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.5);
            background: #ccc;
            border-radius:5px;
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: var(--smbabyblue) !important;
            cursor:pointer;
        }

        .kb_badge_main{

            /* background: none; */
            /* color: var(--smblue); */
            /* margin:6px 10px 6px 10px; */
            border:1px solid black;
            /* border-radius: 20px; */

         }
         .kb_badge_detail{
            background:#2f2f2f;
         }
         .mtt_category{
            color: white;
         }
         .mtt_cont{
            background: #2f2f2f;
            color:white;
         }
         .mtt_title{
            color:white;
         }
         .omni_instruct{
            color:white;
         }


    }/*end of dark*/

    /* 'xs': '100px',
    'sm': '640px',
    'md': '768px',
    'lg': '1024px',
    'xl': '1280px',
    '2xl': '1536px', */

/* @media (min-width: 1280px){
    .col-xl-1{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.333%;
        flex: 0 0 8.333%;
        max-width: 8.333%;
        border: 0px solid var(--smblue);
    }
    .col-xl-2{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.66%;
        flex: 0 0 16.66%;
        max-width: 16.66%;
        border: 0px solid var(--smblue);
    }
    .col-xl-3{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
        border: 0px solid var(--smblue);
    }
    .col-xl-4{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33%;
        flex: 0 0 33.33%;
        max-width: 33.33%;
        border: 0px solid var(--smblue);
    }
    .col-xl-5{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.66%;
        flex: 0 0 41.66%;
        max-width: 41.66%;
        border: 0px solid var(--smblue);
    }
    .col-xl-6{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        border: 0px solid var(--smblue);
    }
    .col-xl-8{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.66%;
        flex: 0 0 66.66%;
        max-width: 66.66%;
        border: 0px solid var(--smblue);
    }
    .col-xl-10{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 83.333%;
        flex: 0 0 83.333%;
        max-width: 83.333%;
        border: 0px solid var(--smblue);
    }
    .col-xl-11{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 91.667%;
		flex: 0 0 91.667%;
		max-width: 91.667%;
		border: 0px solid var(--smblue);
	}
    .col-xl-12{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        border: 0px solid var(--smblue);
    }
} */

@media (min-width: 1024px)  {/*992px*/ /*and (max-width: 1279px)*/
    .col-lg-1{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 8.333%;
		flex: 0 0 8.333%;
		max-width: 8.333%;
		border: 0px solid var(--smblue);
	}
	.col-lg-2{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 16.66%;
		flex: 0 0 16.66%;
		max-width: 16.66%;
		border: 0px solid var(--smblue);
	}
	.col-lg-3{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
		border: 0px solid var(--smblue);
	}
	.col-lg-4{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 33.33%;
		flex: 0 0 33.33%;
		max-width: 33.33%;
		border: 0px solid var(--smblue);
	}
	.col-lg-5{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 41.66%;
		flex: 0 0 41.66%;
		max-width: 41.66%;
		border: 0px solid var(--smblue);
	}
	.col-lg-6{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
		border: 0px solid var(--smblue);
	}
	.col-lg-7{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 58.34%;
		flex: 0 0 58.34%;
		max-width: 58.34%;
		border: 0px solid var(--smblue);
	}
	.col-lg-8{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 66.66%;
		flex: 0 0 66.66%;
		max-width: 66.66%;
		border: 0px solid var(--smblue);
	}
	.col-lg-9{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
		border: 0px solid var(--smblue);
	}
	.col-lg-10{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 83.333%;
		flex: 0 0 83.333%;
		max-width: 83.333%;
		border: 0px solid var(--smblue);
	}
    .col-lg-11{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 91.667%;
		flex: 0 0 91.667%;
		max-width: 91.667%;
		border: 0px solid var(--smblue);
	}
	.col-lg-12{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		border: 0px solid var(--smblue);
	}
}


@media (min-width: 768px) and (max-width: 1023px){ /* and (max-width: 991px)*/
    .col-md-1{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 8.33%;
		flex: 0 0 8.33%;
		max-width: 8.33%;
		border: 0px solid var(--smblue);
	}
	.col-md-2{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 16.66%;
		flex: 0 0 16.66%;
		max-width: 16.66%;
		border: 0px solid var(--smblue);
	}
	.col-md-3{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
		border: 0px solid var(--smblue);
	}
	.col-md-4{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 33.33%;
		flex: 0 0 33.33%;
		max-width: 33.33%;
		border: 0px solid var(--smblue);
	}
	.col-md-5{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 41.66%;
		flex: 0 0 41.66%;
		max-width: 41.66%;
		border: 0px solid var(--smblue);
	}
	.col-md-6{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
		border: 0px solid var(--smblue);
	}
	.col-md-8{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 66.66%;
		flex: 0 0 66.66%;
		max-width: 66.66%;
		border: 0px solid var(--smblue);
	}
	.col-md-7{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 58.34%;
		flex: 0 0 58.34%;
		max-width: 58.34%;
		border: 0px solid var(--smblue);
	}
	.col-md-9{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
		border: 0px solid var(--smblue);
	}
	.col-md-10{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 83.333%;
		flex: 0 0 83.333%;
		max-width: 83.333%;
		border: 0px solid var(--smblue);
	}
    .col-md-11{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 91.667%;
		flex: 0 0 91.667%;
		max-width: 91.667%;
		border: 0px solid var(--smblue);
	}
	.col-md-12{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		border: 0px solid var(--smblue);
	}

}

@media (min-width: 640px) and (max-width: 767px){ /*(min-width: 576px)  and (max-width: 767px)*/
    .tbl_least_prio{
        display: none;
    }

    .col-sm-1{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 8.333%;
		flex: 0 0 8.333%;
		max-width: 8.333%;
		border: 0px solid var(--smblue);
	}
	.col-sm-2{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 16.66%;
		flex: 0 0 16.66%;
		max-width: 16.66%;
		border: 0px solid var(--smblue);
	}
	.col-sm-3{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
		border: 0px solid var(--smblue);
	}
	.col-sm-4{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 33.33%;
		flex: 0 0 33.33%;
		max-width: 33.33%;
		border: 0px solid var(--smblue);
	}
	.col-sm-5{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 41.66%;
		flex: 0 0 41.66%;
		max-width: 41.66%;
		border: 0px solid var(--smblue);
	}
	.col-sm-6{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
		border: 0px solid var(--smblue);
	}
	.col-sm-7{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 58.34%;
		flex: 0 0 58.34%;
		max-width: 58.34%;
		border: 0px solid var(--smblue);
	}
	.col-sm-8{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 66.66%;
		flex: 0 0 66.66%;
		max-width: 66.66%;
		border: 0px solid var(--smblue);
	}
	.col-sm-9{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
		border: 0px solid var(--smblue);
	}
	.col-sm-10{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 83.333%;
		flex: 0 0 83.333%;
		max-width: 83.333%;
		border: 0px solid var(--smblue);
	}
    .col-sm-11{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 91.667%;
		flex: 0 0 91.667%;
		max-width: 91.667%;
		border: 0px solid var(--smblue);
	}
	.col-sm-12{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		border: 0px solid var(--smblue);
	}
    .hapag{
        overflow-x: auto;
        display:block;
    }
}

@media  (min-width: 0px) and (max-width: 639px){ /*(max-width: 575px)*/

    .hapag{
        overflow-x: auto;
        display:block;
        min-width: 300px;
    }

    .tbl_least_prio{
        display: none;
    }
    .col-xs-1{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 8.333%;
		flex: 0 0 8.333%;
		max-width: 8.333%;
		border: 0px solid var(--smblue);
	}
	.col-xs-2{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 16.66%;
		flex: 0 0 16.66%;
		max-width: 16.66%;
		border: 0px solid var(--smblue);
	}
	.col-xs-3{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
		border: 0px solid var(--smblue);
	}
	.col-xs-4{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 33.33%;
		flex: 0 0 33.33%;
		max-width: 33.33%;
		border: 0px solid var(--smblue);
	}
	.col-xs-5{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 41.66%;
		flex: 0 0 41.66%;
		max-width: 41.66%;
		border: 0px solid var(--smblue);
	}
	.col-xs-6{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
		border: 0px solid var(--smblue);
	}
	.col-xs-7{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 58.34%;
		flex: 0 0 58.34%;
		max-width: 58.34%;
		border: 0px solid var(--smblue);
	}
	.col-xs-8{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 66.66%;
		flex: 0 0 66.66%;
		max-width: 66.66%;
		border: 0px solid var(--smblue);
	}
	.col-xs-9{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 75%;
		flex: 0 0 75%;
		max-width: 75%;
		border: 0px solid var(--smblue);
	}
	.col-xs-10{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 83.333%;
		flex: 0 0 83.333%;
		max-width: 83.333%;
		border: 0px solid var(--smblue);
	}
    .col-xs-11{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 91.667%;
		flex: 0 0 91.667%;
		max-width: 91.667%;
		border: 0px solid var(--smblue);
	}
	.col-xs-12{
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		border: 0px solid var(--smblue);
	}

}

.main{
        background:white;
        width:100%;
    }

    

    .img{
        aspect-ratio:16/4;
        object-fit: cover;
        width:100%;
        /* border-radius: 10px; */
    }

    .img:hover {
    /*   */
    /* transition-delay: 1s; */
    /* transition-duration: 1.5s; */
    /* transition-timing-function: ease-in-out; */
        /* animation-name: zoom;
        animation-duration:1.5s;
        animation-timing-function: ease-in-out;
        animation-fill-mode:both ; */
    }

    /* @keyframes zoom {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.1);
        }
    } */
    .header{
        /* background:white; */
        /* backdrop-filter: blur(2px); */
        /* height:var(--header_height); */
        /* height:var(--header_height); */
        /* position:absolute; */
        top:0px;
        position:fixed;
        width:100%;
        /* position: relative; */
        z-index: 10;
        /* box-shadow:0px 0px 150px 0px rgba(251, 248, 248, 0.989); */
    }

    .btn_menu_toggle:hover, .btn_notif:hover{
        color : white;
        background: #0030ff;
        box-shadow:0px 0px 10px 0px #0030ff;
    }

    .btn_float{
        position:fixed;
        z-index:10;
    }

    .btn_notif{
        position:fixed;
        right:0px;
    }


    .btn_menu_toggle, .btn_notif{
        /* box-shadow:0px 0px 10px 0px white; */
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        height: 40px;
        width: 40px;
        border:none;
        box-sizing: border-box;
        display: inline-block;
        cursor: pointer;
        line-height: inherit;
        font-family: "HenrySans-Black";
        cursor:pointer;
        font-weight:bold;
        /* padding:6px 20px 6px 20px; */
        border-radius:20px;
        margin:10px;
        /* box-shadow:0px 0px 5px 0px #ffffff; */
        outline: none;
        min-width:fit-content !important;
        text-align: center;
        background: white;
        color: #0030ff;
        /* font-size:20px; */
        /* position:fixed; */
        /* left: 50%; */
        /* top:0px; */
    }

    .menu_active{
        animation-name: sidebar_show;
        animation-duration: 1s;
        animation-delay: 0s;
        /* animation-direction : reverse; */
        animation-fill-mode: forwards;
        display:inline-block !important;
    }

    .menu_inactive{
        animation-name: sidebar_hide;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
        display: none;
    }

    .notif_active{
        animation-name: sidebar_show;
        animation-duration: 1s;
        animation-delay: 0s;
        /* animation-direction : reverse; */
        animation-fill-mode: forwards;
        display:inline-block !important;
    }

    .notif_inactive{
        animation-name: sidebar_hide;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
        display: none;
    }

    @keyframes sidebar_show{
        0%{
            display:none;
            opacity:0%;
            height: 0px;
        }
        100% {
            display:inline-block;
            opacity:100%;
            height: calc(100% - 60px);
            /* height: 100%; */
        }
    }
    @keyframes sidebar_hide{
        0%{
            opacity:100%;
            display:inline-block;
            height: calc(100% - 60px);
            /* height: 100%; */
        }
        100% {
            display:none;
            height: 0px;
            opacity:0%;
        }
    }

    
    .card_overflow{
        max-height: 500px;
        overflow-y: auto;
        overflow-x: hidden;
        /* background:red; */
    }

    .card{
        background:white;
        border-radius: 10px;
        margin:4px;
        padding:20px;
        border:1px solid #f0efef;
    }

    .card_active{
        background:var(--green_l);
        /* color:var(--green_d); */
        border: 2px solid var(--green_s);
    }

    .notif{
        backdrop-filter: blur(4px);
        position:fixed;
        top:65px;
        right:10px;
        padding:12px 12px;
        width:300px;
        height: calc(100% - var(--header_height));
        border-radius:  12px;
        z-index: 2;
        max-height: calc(100% - 80px);
        overflow: hidden;
        display:none;
        height: calc(100% - 70px);
        max-height: calc(100% - 70px);
    }
    .notif_base{
        /* height: calc(100% - 70px); */
        /* max-height: calc(100% - 70px); */
        border-radius:  12px;
        margin-bottom:10px;
        padding:10px;
        /* background:#f0ecfc; */
        background:white;
        /* background-image: url('../images/sm_banner.png');
        background-size: cover;
        background-position: center; */
        /* box-shadow:0px 0px 10px 0px rgb(0 0 0 / 50%); */
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .menu, .menux{
        /* background: rgba(250, 250, 250, 0.8); */
        /* background: rgba(250, 250, 250, 0.1); */
        /* background: white; */
        /* box-shadow:0px 0px 10px 0px rgb(0 0 0 / 50%); */
        /* background:#f0ecfc; */
        backdrop-filter: blur(4px);
        position:fixed;
        top:65px;
        left:10px;
        padding:12px 12px;
        width:300px;
        height: calc(100% - var(--header_height));
        /* height: 100%; */
        /* padding:10px; */
        border-radius:  12px;
        /* border-radius: 0px 20px 0px 20px ; */
        z-index: 2;
        max-height: calc(100% - 80px);
        overflow: hidden;
        /* display:inline-block; */
        display:none;
        /* overflow-y: scroll; */
    }

    .scrolling-container {
        width: 100%;
        overflow: scroll; /* Hides the excess content outside the view */
        white-space: nowrap; /* Prevents content from wrapping */
    }

    .scrolling-content {
    display: inline-block;
    /* Set initial width to 200% (or more) to accommodate the duplicated content */
    width: 200%; 
    animation: scroll-loop 20s linear infinite; /* Animation properties */
    }

@keyframes scroll-loop {
  0% {
    transform: translateX(0); /* Start position */
  }
  100% {
    /* Translate the width of the original content (e.g., 50% of the container) */
    transform: translateX(-50%); 
  }
}


    .menux{
        /* backdrop-filter: none; */
        border-radius:  0px;
    }

    .menu_base, .menu_basex{
        height: calc(100% - 70px);
        max-height: calc(100% - 70px);
        border-radius:  12px;
        margin-bottom:10px;
        padding:10px;
        /* background:#f0ecfc; */
        background:white;
        /* box-shadow:0px 0px 10px 0px rgb(0 0 0 / 50%); */
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }
    .menu_basex{
        background:rgba(255, 255, 255, 0.5);
        
        /* background:rgba(0, 48, 255, 0.1); */
        /* padding:10px; */
        box-shadow:none;
        backdrop-filter: blur(4px);
    }


    .menu_main, .menu_mainx{
        
        /* box-shadow:0px 0px 10px 0px rgb(0 0 0); */
        overflow: hidden;
        overflow-y: auto;
        /* background:#f0ecfc; */
        background:white;
        /* margin-bottom:10px; */
        /* height: calc(100% - 70px); */
        height: 100%;
        /* padding-bottom:20px; */
        border-radius:  12px;
        max-height: 100%;
    }

    .menu_mainx{
        /* background:rgba(250,250,250,0.2); */
        border-radius:  10px;
        height: auto;
        background:none;

    }

    .menu_main2{
        overflow: hidden;
        overflow-y: auto;
        background:#f0ecfc;
        height: calc(100% - 10px);
        margin:5px;

    }

    .menu_footer{
        height: 60px;
        /* background:#b4f2df; */
        /* color:#246c63; */
        background:#0030ff;
        /* background-image: url('../images/sm_banner.png');
        background-size: cover;
        background-position: center; */
        color:white;
        /* border-radius: 0px 0px 12px 12px ; */
        border-radius:12px ;
        padding:6px 12px;
        /* box-shadow:0px 0px 10px 0px rgb(0 0 0 / 50%); */
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .menu_footer_main{
        overflow: hidden;
    }

    .menu_footer_name{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 50px;
    }

    
    .menu:hover{
        /* border-radius:  12px; */
        /* background:white; */
    }

    .ul_menu li, .ul_menux li{
        list-style-type:none;
        /* border:1px solid red; */
        cursor: pointer;
        padding:8px;
        /* background:rgba(250, 250, 250, 0.12); */
        color:#0030ff;
        margin-bottom: 2px;
        /* border-radius: 4px; */
    }

    .ul_menux li{
        margin-bottom: 0px;
        background:white;
        /* border-radius: 4px; */
    }

    .ul_menu li:hover, .ul_menux li:hover{
        /* background-image: linear-gradient(to right, #0030ff, white); */
        background:#0030ff;
        color:#f0ecfc;
        /* font-weight: bold; */
        /* box-shadow:0px 0px 10px 0px rgb(0 0 0 / 50%); */
    }

    
    .ul_menu li ul, .ul_menux li ul{
        /* background:#0030ff; */
        /* color:white; */
        display:none;
    }
    .ul_menu li ul li:hover, .ul_menux li ul li:hover{
        box-shadow:none;

    } 

    .ul_menu_drp i{
        margin-top:4px;
    }

    .ul_menu_drp_active{
        background:#f0ecfc !important;
        /* background:#0030ff !important; */
        color:#0030ff !important;
    }

    .ul_menu_drp_inactive{
        background:none;
        color:#0030ff ;
    }



    .ul_sub_menu_drp{
        
        border-left:2px solid #6051e3;
        margin-top:12px;
        /* margin-left:4px; */
        /* border-radius: 6px; */
        /* background: red;   */
    }

    .ul_sub_menu_drp li{
        /* box-shadow:none; */
        /* background:#accaff; */
        background:#f0ecfc;
        /* color:#0030ff ; */
        /* border-left:3px solid #6051e3; */
        margin:6px 6px 6px 0px ;
        border-radius: 0px 6px 6px 0px;
    }

    .ul_sub_menu_drp li:hover{
        background:#f0ecfc;
        
        /* background-image: linear-gradient(to right, #accaff, white); */
        color:#0030ff;
        border-left:2px solid #6051e3;
        /* border-left:3px solid white; */
        
    }

    .ul_sub_menu_drp_active{
        display:block !important;
        /* background:white !important; */
        /* color:white; */
    }

    .ul_sub_menu_drp_inactive{
        display:none !important;
    }


    .body{
        /* background:rgb(145, 230, 241); */
        overflow: hidden;
        height: calc(100vh - var(--header_height));
        max-height: calc(100vh - var(--header_height));
        /* height: 100vh; */
        /* max-height: 100vh; */
        /* position: relative; */
        /* z-index: -2; */
    }
    
    
    .banner{
        /* background:red; */
        /* background-image: url("/storage/banner/hero-img.jpg"); */
        /* margin:40px; */
        width:100%;
        aspect-ratio:16/6;
        overflow: hidden;
        z-index: 1;
        position: absolute;
    }

    .footer{
        /* background: #0030ff; */
        /* background: red; */
        aspect-ratio:16/4;
        object-fit: cover;
        background-image: url('../images/sm_banner.png');
        /* background-image: url('../images/JobsPageBanner4.png'); */
        background-size: cover;
        background-position: center;
        color:white;
        /* margin-bottom: 10px; */
        height: var(--footer_height);
        padding: 20px;
        z-index: 0;
        width:100%;
        position: absolute;
        bottom:0px;
    }

    .main_detl{
        /* background: rgba(250, 250, 250, 0.5); */
        background:white;
        /* margin:200px 20px; */
        margin-top: calc(((100vw * 4)/14) - 20px);
        padding: 20px 40px;
        margin-bottom: calc(var(--footer_height) - 20px);
        min-height: 120vh;
        border-radius:  20px;
        /* box-shadow:0px -20px 20px 3px  rgba(251, 248, 248, 0.989); */
        box-shadow:0px 0px 20px 0px  rgba(31, 31, 31, 0.7);
    }

    .main_detl2{
        /* background: rgba(250, 250, 250, 0.5); */
        background:white;
        /* margin:200px 20px; */
        margin-top: calc(((100vw * 4)/16) - 20px);
        padding: 20px 40px;
        margin-bottom: calc(var(--footer_height) - 20px);
        min-height: 120vh;
        border-radius:  20px;
        /* box-shadow:0px -20px 20px 3px  rgba(251, 248, 248, 0.989); */
        box-shadow:0px 0px 20px 0px  rgba(31, 31, 31, 0.7);
    }

    .main_base{
        min-height: calc(100vh - var(--header_height));
        max-height: calc(100vh - var(--header_height));
        /* min-height: 100vh; */
        /* max-height: 100vh; */
        z-index: 1;
        position: absolute;
        /* background:red; */
        /* position: absolute; */
        /* margin-top:200px; */
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
        display: none;
    }


    
@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }

  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

.ringring{
    -webkit-animation: ringring 4s .7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ringring 4s .7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ringring 4s .7s ease-in-out infinite;
    transform-origin: 50% 4px;
}

.ring2{
    animation-name: shake;
    animation-timing-function: ease-in-out;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-delay: .5s;
}


@keyframes shake {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20%,
  60% {
    transform: rotate(6deg);
  }
  40%,
  80% {
    transform: rotate(-6deg);
  }
}

@-moz-keyframes ringring {
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }

  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}

@keyframes ringring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }
  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.social-btn:hover {
    opacity: 0.9;
}

.social-btn.facebook {
    background: linear-gradient(135deg, #1877F2 0%, #0D5DBD 100%);
}

.social-btn.instagram {
    background: linear-gradient(135deg, #E4405F 0%, #C13584 100%);
}

.social-btn.linkedin {
    background: linear-gradient(135deg, #0A66C2 0%, #004182 100%);
}

.social-btn.tiktok {
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
}/* Copied from glassui.css: navbar-related classes */
.glass-nav {
    background: #F3F6FC;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.nav-link {
    position: relative;
    padding: 0.5rem 0;
    transition: all 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #0300FF;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.mobile-menu {
    transition: max-height 0.5s ease-out, opacity 0.3s ease;
    overflow: hidden;
}

.dropdown {
    position: relative;
    z-index: 99;
}

.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    position: absolute;
    z-index: 99;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        margin-left: 1rem;
    }

    .dropdown.active .dropdown-menu {
        display: block;
    }
}