*{box-sizing: border-box;padding:0px;margin:0px;font-family:Vazir-Medium;}
body{padding:0px;margin:0px;background:#f9fafc;}
:root{
--topcolor:#3D9AEB;
--darktext:#11589B;
--btnfinder:#032B44;
--btnBRDfinder:#72C8F1;
--btn_amir:rgb(5, 158, 120);
--base:rgb(2, 107, 168);


--head1:rgba(50,130,255,0.2);
--head:rgba(7,60,82,0.6);
--navbar:rgb(2, 107, 168);
--withe:#fff;
--newnav:rgb(242,242,242);
--shadow1:#212788;
--amirMatn:#eee;
--amirMatn2:#333;
--olivergba:rgba(176,203,31,0.2);
--olive:#b0cb1f;
--yellow:rgb(177, 196, 6);
--darkgreen:#096430;
--darkgreen:#096430;
--newgreen1:rgb(106,209,213);
--newgreen:rgb(56,159,163);
--newgreenlight:rgb(112,175,190);
--newblue:rgb(92,154,191);
--newbludark:rgb(152,165,174);
--newolive:rgb(135,159,80);


--black-v3:#333333;
--black-v5:#555555;
--orang-v3:#ffad01;
--green-v2: #2F3E3E;
--green-v3:#367072;
--green-v4:#6BBF59;

--navy-v3:#2a3642;
--yellow-v3:#FFCC00;
--white-v3:#f0f0f0;
--gray-v3:#777777;

--blue-v3: #52A7C1 ;
--blue-v2: #41869b ;

--red-v3:#e01e38;

}

.trans0_25{transition:0.25s;-webkit-transition:0.25s;-moz-transition:0.25s;-ms-transition:0.25s;-o-transition:0.25s;}
.trans_delay0_25{transition:0.25s;-webkit-transition:0.25s;-moz-transition:0.25s;-ms-transition:0.25s;-o-transition:0.25s;transition-delay: 0.25s; /* Adding the delay of 0.25s */}
.trans0_5{transition:0.5s;-webkit-transition:0.5s;-moz-transition:0.5s;-ms-transition:0.5s;-o-transition:0.5s;}
.trans1{transition:1s;-webkit-transition:1s;-moz-transition:1s;-ms-transition:1s;-o-transition:1s;}
/*-------------------------------------------------------------------------------------------------------------------------*/
.Hinline-block{display: inline-block;}
/*------------------------------------------------HScroll-----------------------------------------------GENERAL----------*/
.HScroll-1{scrollbar-width: thin;scrollbar-color: rgba(200, 200, 200, 0.687) rgba(200, 200, 200, 0.272);}
.HScroll-1::-webkit-scrollbar {height:8px;}
/* Track */.HScroll-1::-webkit-scrollbar-track {box-shadow: inset 0 0 5px rgba(200, 200, 200, 0.272); border-radius: 10px;}
/* Handle */.HScroll-1::-webkit-scrollbar-thumb {background: rgba(14, 14, 14, 0.687) ; border-radius: 10px;}
/* Handle on hover */.HScroll-1::-webkit-scrollbar-thumb:hover {background: rgb(200, 200, 200,0.8) ; }

.line-block{display:block;width:100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }

.line-limitor{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;white-space: wrap;}

/*------------------------------------------------custom-radios---------------------------------------------------------*/
.custom-radios {
    display: inline-block;
}

.custom-radios label{
    display: inline-block;
    cursor: pointer;
}

.custom-radios input[type="radio"] {
    display: none;
}



.custom-radios input[type="radio"]:checked + .radio-text{
   background:#CC0000 !important;
   color:#fff !important;
}

/*------------------------------------------------checkBox-----------------------------------------------GENERAL----------*/
/* The checkBox */
.checkBox-v2 {display:block;position: relative;font-size:14px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.checkBox-v2,.checkBox-v2 *{cursor: pointer;}
/* Hide the browser's default radio button */
.checkBox-v2 input[type="checkbox"] {display:none;}
  
/* Create a custom radio button */
.checkBox-v2 .checkmark{border:1px solid #c00;color:#c00;}
  
/* On mouse-over, add a grey background color */
.checkBox-v2:hover input[type="checkbox"] ~ .checkmark {background-color: #f0f0f0;}
  
/* When the radio button is checked, add a blue background */
.checkBox-v2 input[type="checkbox"]:checked ~ .checkmark {background-color: #fff;}
  
/* Create the indicator (the dot/circle - hidden when not checked) */
/* .checkBox-v2 .checkmark:after {content: "\2714";position: absolute;font-size:14px;transition-duration: 0.3s;display:none;top: 0px;left: 1.5px;background: none;margin-top: -6px;color:#e01e38 ;} */


/* Show the indicator (dot/circle) when checked */
.checkBox-v2 input[type="checkbox"]:checked ~ .checkmark {display: block;color: #f0f0f0;background-color: #c00;}




/*------------------------------------------------Time-----------------------------------------------GENERAL----------*/

input[type=time]::-webkit-datetime-edit-ampm-field {
    display: none !important
}
/*------------------------------------------------pannel---------------------------------------------------------*/
.Hpannel-dashboard .HheadMenuFix{height: 66px;background: #fff;display:block;width:100%;position: fixed;border-bottom:2px solid #ddd;top:0px;z-index: 2000;color:#2a3642}
.Hpannel-dashboard .back-cover{display:block;position: fixed;top:0px;right:0px;height:100%;width:100%;z-index:3000;backdrop-filter:blur(3px) !important;}



.Hpannel-dashboard .HrightMenuFix{z-index:3000;height: 100%;width:200px;background: #fff;display:block;position: fixed;top:0px;right:0px;box-shadow:5px 0px 5px -1px#ddd;}
.Hpannel-dashboard > #RightMenuButton{color:#444 !important;z-index:5000;cursor:pointer;font-size:30px;position: fixed;top:15px;background:#fff;;right:50px !important;}


.Hpannel-dashboard .HrightMenuFix .menu{padding:25px 7px 10px 7px;overflow-y:auto;position: absolute;top:65px;display:block;height:calc(100% - 65px);width:100%;z-index:1000;}
.Hpannel-dashboard .HrightMenuFix .menu li{list-style-type: none;margin:10px 0px;font-size:small;text-align: right;font-family: Vazir-Bold !important;}
.Hpannel-dashboard .HrightMenuFix .menu li a{padding:10px;display:block;cursor: pointer;color:#444;border-radius:10px;}
.Hpannel-dashboard .HrightMenuFix .menu li a *{cursor: pointer;}
.Hpannel-dashboard .HrightMenuFix .menu .hasChildNodes:hover{background:#2196f6;color:#fff !important;}
.Hpannel-dashboard .HrightMenuFix .menu li a:hover{background:#444;color:#fff !important;}
.Hpannel-dashboard .HrightMenuFix .menu li a:hover > span{color:#CC0000;}
.Hpannel-dashboard .HrightMenuFix .menu .hasChildNodes{color:#444;padding:10px;font-family: Inter-Bold;border-radius:10px;}
.Hpannel-dashboard .HrightMenuFix .menu .childNode{display:none}
.Hpannel-dashboard .HrightMenuFix .menu .childNode li a::before{content:" ⯇";float:right;margin-left:5px;position: relative;top:0px;}
.Hpannel-dashboard .HrightMenuFix .menu .opened{display:block;}
.Hpannel-dashboard .HrightMenuFix .menu .parentOpened{background:#2196f6;color:#fff !important;}
.Hpannel-dashboard .HrightMenuFix .menu .hasChildNodes:hover .icon{color:#fff !important;}
.Hpannel-dashboard .HrightMenuFix .menu .parentOpened .icon{color:#fff !important;}
.Hpannel-dashboard .Hbody{margin-top: 66px;}
.Hpannel-dashboard .HrightMenuFix_CLOSE{margin-right:-250px;}
.Hpannel-dashboard .HbodyFull{width:100%;}
.Hpannel-dashboard .HrightMenuFix .menu .icon{width:30px;text-align: center;color:#CC0000;margin-left:5px;padding-top:5px;}

.Hpannel-dashboard  #Profile{float:left;left:50px;top:15px;width:35px;height:35px;border:2px solid #2196f6;position:relative;display:inline-block;border-radius:50%;background-size:cover;background-position:center center;background-repeat:no-repeat;}

.Hpannel-dashboard  .HheadMenuFix .dropDown{display:none;padding:15px 30px;background:#fff;box-shadow: 0px 0px 5px #ccc;position:absolute;top:50px;left:90px;}
.Hpannel-dashboard  .HheadMenuFix .dropDown > a{display:block;margin:5px auto;color:#666;}
.Hpannel-dashboard  .HheadMenuFix .dropDown.active{display:block;}


.Hpannel-dashboard #menu_bottom{z-index:10;text-align:center;padding:10px 20px;background: #fff;box-shadow: 0px 5px 10px 2px #aaa;max-width:490px;min-width: 310px;overflow: auto;position: fixed;border-radius:10px;bottom:30px;right:50%;transform: translateX(50%);}
.Hpannel-dashboard #menu_bottom a{width:90px;display:inline-block;}
.Hpannel-dashboard #menu_bottom a > * , .Hpannel-dashboard #menu_bottom a{cursor: pointer !important;}
.Hpannel-dashboard #menu_bottom a > span{display: block;color:var(--gray-v3)}
.Hpannel-dashboard #menu_bottom a.active > span{color:var(--red-v3);}
.Hpannel-dashboard #menu_bottom a > small{color:var(--gray-v3)}
.Hpannel-dashboard .footer{display:block;padding-top: 100px !important;}

.pannel-buttons{padding-top:12px;}
.pannel-buttons>a{font-size:20px;display:inline-block;padding:10px;position: relative;cursor: pointer;}
.pannel-logout:hover{color:#CC0000 !important;}
.pannel-home:hover{color:#2196f6 !important;}



.listShow-N2>div:nth-child(2n+1){background:#eee;}
.listShow-N2>div:nth-child(2n){background:#fff;}
.listShow-N2>div{color:#333}


.listShow-N3>div:nth-child(2n+1){background:#f7f7f7;}
.listShow-N3>div:nth-child(2n){background:#fff;}
.listShow-N3>div{color:#333}


#technology_collection_box > span{display:inline-block;margin:5px;padding:2px 15px;border-radius:20px;border:1px solid #34444e;background:#34444e;color:#fff;}
#technology_collection_box > span >b{margin-right:5px;cursor: pointer;padding:0px 5px;}

.Hbtn-orang-v3{border:1px solid #ffad01;background:#ffad01;color:#fff;}
.Hbtn-orang-v3:hover{background:transparent;color:#ffad01 !important;}

.Hbtn-green-v4{border:1px solid var(--green-v4);background:var(--green-v4);color:#fff;}
.Hbtn-green-v4:hover{background:transparent;color:var(--green-v4) !important;}

.Hbtn-green-v3{border:1px solid var(--green-v3);background:var(--green-v3);color:#fff;}
.Hbtn-green-v3:hover{background:transparent;color:var(--green-v3) !important;}

.Hbtn-red-v3{border:1px solid #CC0000;background:#CC0000;color:#fff;}
.Hbtn-red-v3:hover{background:transparent;color:#CC0000 !important;}

.Hbtn-blue-v3{border:1px solid #2196f6;background:#2196f6;color:#fff;}
.Hbtn-blue-v3:hover{background:transparent;color:#2196f6 !important;}

.Hbtn-navy-v3{border:1px solid #2a3642;background:#2a3642;color:#fff;}
.Hbtn-navy-v3:hover{background:transparent;color:#2a3642 !important;}

.Hbtn-yellow-v3{border:1px solid #FFCC00;background:#FFCC00;color:#fff;}
.Hbtn-yellow-v3:hover{background:transparent;color:#FFCC00 !important;}

.Hbg-navy-v3{background:#2a3642}
.Hbg-orange-v3{background:#ffad01;}
.Hbg-green-v3{background:#32cd32;}
.Hbg-blue-v3{background:#2196f6;}
.Hbg-red-v3{background:#CC0000;}
.Hbg-yellow-v3{background:#FFCC00;}

.Hcenter{right:50%;transform: translateX(50%);}

.Htitr-3{font-family: BYekan;position: relative;text-align: center;}
.Htitr-3::after,.Htitr-3::before{content:"";display:block;width:40px;height:4px;position: absolute;bottom:-15px;}
.Htitr-3::after{border-radius:0px 10px 10px 0px;left:50%;transform:translateX(0px);background:#36707274;}
.Htitr-3::before{border-radius:10px 0px 0px 10px;left:50%;transform:translateX(-40px);background:var(--green-v3);}


.Htitr-4{font-family: Yekan;position: relative;text-align: right;}
.Htitr-4::after,.Htitr-4::before{content:"";display:block;width:40px;height:4px;position: absolute;bottom:-15px;}
.Htitr-4::after{border-radius:0px 10px 10px 0px;right:0%;background:var(--green-v3);}
.Htitr-4::before{border-radius:10px 0px 0px 10px;right:40px;background:#36707274;}


.Htitr-4.mini::after,.Htitr-4.mini::before{height:2px;bottom:-5px;}

.checkDisabled{background:#aaa !important;}

.Hmiddle-R{display:inline-block;position:relative;right:50%;transform: translateX(50%);}
.Hmiddle-L{display:inline-block;position:relative;left:50%;transform: translateX(-50%);}


.shadowFaid{box-shadow: 0px 0px 5px #ccc;}
.shadowFaid-light{box-shadow: 0px 0px 5px #eee;}
.HInlineBlock{display: inline-block;}


.searchAndIns input{border:1px solid #eee;width:270px;font-size:small;}
.searchAndIns button{border:0px;font-size:small;position: absolute;left:0px;width:33px;height:33px;cursor: pointer;}


.HbannerBox{border-radius:10px;display:block;padding-top:50%;position:relative;}
.HbannerBox a{background-position: center;background-size: contain;background-repeat: no-repeat;background-color:#000;border-radius:10px;position: absolute;top:0px;right:0px;width:100%;height: 100%;}
.HbannerBox span{width:35px;height:35px;border-radius: 50%;top:-5px;left:-5px;font-size:20px;padding-top:7px;color:#fff;cursor: pointer;;background-color: var(--red-v3);position: absolute;z-index:1;}

.HsupplierBox{border-radius:10px;display:block;position:relative;}
.HsupplierBox > span{display:block;background-position: center;background-size: contain;background-repeat: no-repeat;background-color:#000;border-radius:4px;padding-top:100%;position: relative;top:0px;right:0px;width:100%;}
.HsupplierBox > span > span{width:35px;height:35px;border-radius: 50%;top:-5px;left:-5px;font-size:20px;padding-top:7px;color:#fff;cursor: pointer;;background-color: var(--red-v3);position: absolute;z-index:1;}
.HsupplierBox > a{display:block;text-align: center;background:#eee;color:#636363;border-radius: 5px;}


.HcompanyListBox{border-radius:50%;display:inline-block;position:relative;width:100px;height:100px;margin:15px;;}
.HcompanyListBox a{background-position: center;background-size: contain;background-repeat: no-repeat;background-color:#000;border-radius:50%;position: absolute;top:0px;right:0px;width:100%;height:100%;}
.HcompanyListBox span{width:35px;height:35px;border-radius: 50%;top:-5px;left:-5px;font-size:20px;padding-top:7px;color:#fff;cursor: pointer;;background-color: var(--red-v3);position: absolute;z-index:1;}



#warehouse_list > div > .imgs >span{border:solid 4px #2a3642;overflow:hidden;display:inline-block;width:85px;height:85px;border-radius:50%;margin:auto;position:relative;background-color: #eee;background-position: center ,center;background-size: cover ,cover;cursor: pointer;}
#warehouse_list > div > .imgs >span>small{cursor:pointer;position:absolute;display:block;width:75px;height:50px;background-color: rgba(0,0,0,0.5);color:#fff;padding:5px;bottom:-25px;}
#warehouse_list > div > div:not(.imgs){padding-top:35px;font-size:small}
#warehouse_list > div > .settings>span{font-size:15px;padding:5px;position: relative;top:-5px;cursor:pointer;margin:0px 3px;}
#warehouse_list > div > .settings>span.update:hover{color:#ffad01;}
#warehouse_list > div > .settings>span.remove:hover{color:#e01e38;}


.Hgallery-v3{z-index:9999;display: none;position:fixed;width:100%;height: 100%;top:0px;left:0px;}
.Hgallery-v3.active{display:block;}
.Hgallery-v3>.close{position: absolute;top:30px;right:5%;font-size:40px;padding:10px;cursor: pointer;;}
.Hgallery-v3>.img{display: block;position:relative;;width:70%;padding-top:40%;top:50%;transform: translateY(-50%);left:-15%;background-position: center;background-repeat: no-repeat;background-size: contain;background-color: transparent;}
.Hgallery-v3>.btn{position: absolute;top:50%;left:0px;transform: translateY(-50%);width:80%;left:10%}
.Hgallery-v3>.btn>button{font-size: 40px;background:transparent;border:0px;padding:10px 15px;cursor: pointer;}
.Hgallery-v3>.btn>button:first-child{float:right}
.Hgallery-v3>.btn>button:last-child{float:left}

#removeLocation{display:none;position: absolute;left:15px;bottom:30px;z-index: 1000;border:0px;box-shadow: 0px 0px 5px #aaa;}
#removeLocation.active{display:inline-block;}

#getCurrentLocationBtn{position: absolute;right:15px;bottom:30px;z-index: 1000;border:0px;box-shadow: 0px 0px 5px #aaa;}

#loadingMap{position:absolute;display:inline-block;padding:5px 20px;border-radius:5px;box-shadow:0px 0px 5px #aaa;z-index:10000;left:50%;opacity:0;bottom:0px;transform: translateX(-50%);}
#loadingMap.active{opacity:1;bottom:0px;}
#loadingMap > span {animation: rotate 2s linear infinite;}

#mapModal{position: fixed;top:0px;left:-100%;width:100%;height:100%;z-index:5000;}
#mapModal .mdlcover{position: absolute;top:0px;left:0px;width:100%;height:100%;background-color: #0005;backdrop-filter:blur(0px);}
#mapModal .mdlbody{position: absolute;z-index:10;left:50%;top:-50%;transform: translate(-50%,-50%);}
#mapModal .mdlbody .close{position: absolute;right:-5px;top:-5px;font-size:25px;cursor: pointer;}

#mapModal.active{top:0px;left:0px;}
#mapModal.active .mdlcover{backdrop-filter:blur(3px) !important;}

.button-action>button{display: inline-block;border: 0px;}
.button-action>button.deactive{display: none !important;}

#imgList>div>div{overflow:auto;width:100%;position: relative;padding-top:50%;background-position: center;background-size: contain;background-repeat: no-repeat;background-color: #36425c;}
#imgList>div>span{position:absolute;top:0px;left:0px;width:25px;height:25px;text-align: center;padding-top:5px;;}


.Hcard-v7{box-shadow:0px 0px 5px #aaa;position:relative;display:block;}
.Hcard-v7 .poster{background-size: cover;background-repeat: no-repeat;background-position: center;padding-top:100%;display:block;background-color:#eee;}
.Hcard-v7 .titr{max-height:30px;height:30px;line-height:25px;-webkit-line-clamp: 1;font-weight:550;color:var(--navy-v3);font-size:20px;}
.Hcard-v7 > small{line-height:25px;-webkit-line-clamp: 4;max-height:100px;height:100px;display: block;text-align: justify;}













.classSearchFormBox #searchBox{
    width:calc(100% - 200px);
    display:inline-block;
    font-size:small;
    border:0px;
}

.classSearchFormBox .icon{position: absolute;left:10px;top:5px;font-size: 20px;padding:5px;}
.classSearchFormBox .icon.hide{display:none;}

.Hcard-list , .Hcard-list *{cursor: pointer;}
.masterTitle>.img{border:2px solid var(--gray-v3);position: relative;display: inline-block;width:45px;height:45px;border-radius: 50%;background-position: center;background-size: cover;background-repeat: no-repeat;}
.masterTitle>.title{position: relative;display: inline-block;width:calc(100% - 50px);text-overflow: ellipsis;white-space: nowrap;overflow: hidden;text-align: right;}

.classInfo-imgCard{border:2px solid #fff;box-shadow:0px 0px 5px #aaa;border-radius:5px;;width:100%;padding-top:50%;display:block;position: relative;background-repeat: no-repeat;background-position: center;background-size: contain;background-color: var(--navy-v3);}
.classInfoReqToJoin{display:block;position: fixed;max-width:400px;width:95%;bottom:100px;z-index:10;}

.masterTitle2 .img{display:block;border:2px solid #fff;box-shadow:0px 0px 5px #aaa;width: 150px;height:150px;border-radius: 50%;position: relative;background-position: center;background-size: cover;}


.classManagement .searchBox #searchStudent{padding:7px;display: inline-block;width:calc(100% - 60px);border:0px;}
.classManagement .searchBox .icon.fa-times{position: absolute;left:10px;border:0px;cursor: pointer;}
.classManagement .searchBox .icon.hide{display:none;}

.classManagement > div:first-child{padding:0px 30px !important;}


.userReqBox .img{background-position: center;background-size: cover;border:2px solid var(--blue-v3);width:75px;height:75px;border-radius:50%;position: relative;}
.userReqBox .data{overflow: auto;position: relative;display:inline-block;padding-top:10px;line-height: 30px;;}
.userReqBox .btns{float:left;width: 150px;display:inline-block}

.stBox .students{border-bottom:1px solid var(--gray-v3)}
.stBox .students .data>span{background-size:cover;background-position: center;width:50px;height:50px;border-radius: 50%;display:inline-block;position: relative;border:2px solid var(--gray-v3)}
.stBox .students .data>small{display:inline-block;position: relative;top:-15px;color:var(--blue-v3);padding-right:10px;cursor:pointer;}
.stBox .students .btns{position: relative;top:17px;font-size: 18px;display:inline-block;}
.stBox .students .btns > span:last-child{font-size:15px;display:inline-block;width:20px;height:20px;border-radius: 50px;text-align: center;padding-top:2px;}
.stBox .students .btns b{color:var(--black-v3);font-size:14px;top:5px;position: relative;right:-3px;cursor: pointer;}
/* .stBox .students .switcheBox{display:none;} */
/* .stBox .students .switcheBox.active{display:inline-block;} */
.stBox .students .switcheBox .switch{padding-top:10px;display: none;}
.stBox .students .switcheBox .presence.active, .stBox .students .switcheBox .pay.active{display: inline-block;}

.classManagement .paymentHeader.deactive ,.classManagement .presenceHeader.deactive{display:none;}
.classManagement #presence.active ,.classManagement #pay.active{background:var(--red-v3) !important;color:#fff !important;}








/* xss 320*/
@media only screen and (max-width : 320px) {
    .classSearchFormBox #searchBox{
        width:100%;
        margin-bottom:10px;
    }
    .classSearchFormBox .icon{top:52px;}
    .userReqBox .btns{float:left;width: 100%;display:inline-block;padding-top:10px;}
    .userReqBox .btns span{width:45%;margin:0px 2.5%;}
}
/* xs */
@media only screen and (min-width : 321px) and (max-width : 481px) {
    .classSearchFormBox #searchBox{
        width:100%;
        margin-bottom:10px;
    }
    .classSearchFormBox .icon{top:52px;}
    .userReqBox .btns{float:left;width: 100%;display:inline-block;padding-top:10px;}
    .userReqBox .btns span{width:45%;margin:0px 2.5%;}
}
/* sm */
@media only screen and (min-width : 481px) and (max-width : 623px) {

}
/* xsm */
@media only screen and (min-width : 624px) and (max-width : 767px) {

    .Hgallery-v3>.img{width:95%;left:-2.5%;padding-top:70%;}
    .Hgallery-v3>.btn{bottom:5%;top:auto;transform: translateY(0%);}


  

}
/* md */
@media only screen and (min-width : 768px) and (max-width : 879px) {

    .userReqBox .btns{float:left;width: 100%;display:inline-block;padding-top:10px;}
    .userReqBox .btns span{width:45%;margin:0px 2.5%;}
}

/* md to dpwn for menu*/
@media only screen and (max-width : 879px) {

    

}
/* xmd */
@media only screen and (min-width : 880px) and (max-width : 991px) {


}
/* lg */
@media only screen and (min-width : 992px) and (max-width : 1200px) {


}
/* xlg */
@media only screen and (min-width : 1201px) {



}

/*----------- md TO down --------------*/
@media only screen and (max-width : 879px){



}
/*----------- xsm TO down --------------*/
@media only screen and (max-width : 767px) {
    #bodyin{padding-top:50px;}

    .Hpannel-dashboard .HheadMenuFix{display:block;height:auto;padding:3%;}
    .Hpannel-dashboard .HrightMenuFix{height:100%;top:0px;}
    .Hpannel-dashboard .Hbody{width:100%;margin-top:10px;}
    .Hpannel-dashboard .HrightMenuFix .menu{z-index:1000;}

    .Hpannel-dashboard #menu_bottom{width:100%;max-width: 95%;}

    .classManagement > div:first-child{padding:0px 0px !important;margin-bottom: 20px;}

    .classManagement #addStudent {position: fixed;bottom:100px;right:2.5%;width:95%;}
}
/*----------- sm TO down --------------*/
@media only screen and (max-width : 623px) {
    .Hgallery-v3>.img{width:90%;left:-5%;padding-top:85%;}
    .Hgallery-v3>.btn{bottom:10%;top:auto;transform: translateY(0%);}


    
    .classInfoReqToJoin{width:100%;max-width: 95%;}
}
@media only screen and (max-width : 623px){


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

}

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

}