/*==================== My Custom CSS =============================*/

/*@font-face {
font-family: GoogleSans-Regular;
src: url(../fonts/Google-Sans-Font/GoogleSans-Regular.ttf) format('truetype');
}

@font-face {
font-family: GoogleSans-Medium;
src: url(../fonts/Google-Sans-Font/GoogleSans-Medium.ttf) format('truetype');
}

@font-face {
font-family: GoogleSans-Bold;
src: url(../fonts/Google-Sans-Font/GoogleSans-Bold.ttf) format('truetype');
}*/

@font-face {
    font-family: GraphikBlack;
    src: url(../fonts/Graphik-Font-Family/GraphikBlack.otf) format('OpenType');
}

@font-face {
    font-family: GraphikBold;
    src: url(../fonts/Graphik-Font-Family/GraphikBold.otf) format('OpenType');
}

@font-face {
    font-family: GraphikLight;
    src: url(../fonts/Graphik-Font-Family/GraphikLight.otf) format('OpenType');
}

@font-face {
    font-family: GraphikMedium;
    src: url(../fonts/Graphik-Font-Family/GraphikMedium.otf) format('OpenType');
}

@font-face {
    font-family: GraphikRegular;
    src: url(../fonts/Graphik-Font-Family/GraphikRegular.otf) format('OpenType');
}

@font-face {
    font-family: GraphikSemibold;
    src: url(../fonts/Graphik-Font-Family/GraphikSemibold.otf) format('OpenType');
}

@font-face {
    font-family: GraphikSuper;
    src: url(../fonts/Graphik-Font-Family/GraphikSuper.otf) format('OpenType');
}

@font-face {
    font-family: GraphikThin;
    src: url(../fonts/Graphik-Font-Family/GraphikThin.otf) format('OpenType');
}

@font-face {
    font-family: DINNextLTPro-Regular;
    src: url(../fonts/DinNext/DINNextLTPro-Regular.otf) format('opentype');
}

@font-face {
    font-family: DINNextCYR-Medium;
    src: url(../fonts/DinNext/DINNextCYR-Medium.otf) format('opentype');
}

@font-face {
    font-family: DINNextCYR-Heavy;
    src: url(../fonts/DinNext/DINNextCYR-Heavy.otf) format('opentype');
}

@font-face {
    font-family: DINNextCYR-Bold;
    src: url(../fonts/DinNext/DINNextCYR-Bold.otf) format('opentype');
}


.table-responsive {
    overflow-x: scroll !important
}


/*=============== ALert  css ===============*/

.validity_alert {
    font-family: 'GraphikRegular', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #e34242 !important;
    background-color: #fff1f1;
    border: 1px solid #fc8888;
    padding: 5px;
}

.alertmsg  {font-family:'Lato', sans-serif; font-size:12px; font-weight:400; color:#A94442 !important; 
        background-color:#FCF8E3; border:1px solid #FAEBCC; padding:5px; border-radius:4px !important}


.required { color:#e21f26; font-size:11px;font-family: Verdana, Geneva, Tahoma, sans-serif; }

.err-alert {
    font-family: 'Rubik',sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #681019;
    background-color: #F7D7DA;
    border: 1px solid #EF818B;
    padding: 5px
}

/*=============== validation Message css ===============*/

.validity {
    font-family: 'GraphikRegular', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #e34242 !important;
    background-color: #fff1f1;
    border: 1px solid #fc8888;
    padding: 5px;
}

.successmessage_alert {
    font-family: 'Rubik', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #222 !important;
    background-color: #ebf7ee;
    border: 1px solid #3cb556;
    padding: 5px;
    margin: 10px 0px 0px 0px
}


.successmessage { font-family:'Lato', sans-serif; font-size:12px; font-weight:400; color:#fff !important; 
        background-color:#337ab7; border:1px solid #1A5C84; padding:5px; border-radius:4px !important }

.btn-box { text-align:left; margin:10px 0px 5px 0px }

.btn-red { padding:4px 6px; font-family:'Mulish',sans-serif; font-weight:500; color:#FFF; cursor:pointer; text-align:center;
             text-decoration:none; background-color:#AF403F; border:1px solid #AF403F; font-size:10px}
.btn-red:hover { border:1px solid #FFF; color:#FFF}


.downloads ul { font-family:#a4a4a4; width:100%; font-family:GoogleSans-Bold; padding:0px 0px 0px 0px;list-style-type:none; font-size:14px }
.downloads ul li { background-color:#F5f5f5; width:100%; padding:7px; margin:0px 0px 10px 0px}
.downloads ul li:hover { border:1px solid #E2E2E2}
.downloads ul li a { text-decoration:none; }
.downloads ul li a:hover {  text-decoration:underline }

.info-text {
    font-family: 'Mulish', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #E4101E !important;
    background-color: #FFEEDB;
    border: 1px solid #FABFA7;
    padding: 5px;
    border-radius: 4px !important;
}

/*-----------------  MY GRIDVIEW DESIGN ---------------------------*/
.mGrid {   
    width: 100%;   
    background-color: #FFFFFF;   
    margin: 1px 0 1px 0;   
    border: solid 1px #C0C0C0;   
    border-collapse:collapse;   
    font-family:'Mulish', sans-serif;
        
}
    .mGrid td {
        padding: 4px 4px 4px 4px;
        border: solid 1px #c1c1c1;
        color: #000000;
        font-size: 12px;
        text-align: center;
        font-weight: 600;
    }  
.mGrid th {   
    background: #DFECFC;   
    border-left: solid 1px #C0C0C0;   
    color:#0b356c;  
    line-height:30px;  
    padding:0px 5px 0px 5px;
    font-size:13px;
    text-align:center;
    font-family:'Mulish', sans-serif;
    white-space:nowrap;
    font-weight:800
}  

.mGrid tr:hover{ background-color:#f5f5f5; grid-column-sizing:auto }

.mGrid .alt { background: #fcfcfc ; }  
.mGrid .pgr { background: #708090 ; }  
.mGrid .pgr table { margin: 5px 0; }  
.mGrid .pgr td {   
    border-width: 0;   
    padding: 0 6px;   
    border-left: solid 1px #666;   
    font-weight: bold;   
    color: #fff;   
    line-height: 12px;   
    }     
.mGrid .pgr a { color: #FFFFFF; text-decoration: none; }  
.mGrid .pgr a:hover { color: #FFFFFF; text-decoration: none; } 

/*============== MY Vision Profile Css ===============*/

.page-content-inner { background-color:#FFF; padding:10px !important }

.avatar-user { text-align:center; padding:30px 0px 10px 0px }
.avatar-user  .userimg { background-color:#FFF; border:2px solid #98B5C3 !important; width:135px ; height:150px; 
               border-radius:50%; text-align:center; padding:4px }

.avatar-user-name {
    font-size: 20px;
    text-align: center;
    margin: 10px 0px 10px 0px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #E21F26;
}

.welcometext { font-family: 'GoogleSans-Medium'; font-size: 20px; color: #e40000; text-align: center; margin-top:0px }

.employeedetails { color:#222;font-family: 'Inter',Sans Serif; font-size:13.6px; text-align: left; 
                   border-bottom:1px dashed #a4a4a4; margin-right:10px; margin:20px 10px 0px 10px; font-weight:500}
.employeedetails .blue { color:#376073 ; font-weight:600}

.verified-badge { text-align:center; margin:auto auto; }
.verified-badge img { text-align:center; margin:auto auto; width:120px }

.btn-bx-new {
    text-align: right;
    margin: 10px -15px 0px 0px
}

.btn-savebtn {
    background-color: #0B3F88;
    border: 1px solid #0B3F88;
    color: #FFF;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 2px;
    font-family: GraphikMedium,'Sans Serif Collection';
    font-size: 13px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease- 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.btn-savebtn:hover {
    color: rgba(255, 255, 255, .6);
    background-color: #0E51AF;
}

.btn-menu {
    background-color: #007bff;
    border: 2px solid #007bff;
    color: #FFF;
    padding: 5px 10px;
    border-radius:5px;
    font-family: 'Mulish','Sans Serif Collection';
    font-size: 10px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease- 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    font-weight:800;
}

.btn-menu:hover {
    color: rgba(255, 255, 255, .8);
    background-color: #0B5ED7;
    border:2px solid #98C1FE;
}
.btn-menu:focus {
    color: rgba(255, 255, 255, .8);
    background-color: #0B5ED7;
    border:2px solid #98C1FE;
}

.btn-verify {
    background-color: #CF0E15;
    border: 1px solid #CF0E15;
    color: #FFF;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 2px;
    font-family: GraphikMedium,'Sans Serif Collection';
    font-size: 13px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease- 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.btn-verify:hover {
    color: rgba(255, 255, 255, .6);
    background-color: #EB141C;
}

.compare {
    border: 1px solid #fc8888 !important;
    background-color: #fff1f1 !important;
}
.compare:hover { border:1px solid #fc8888; background-color: #fff1f1}
.compare:focus { border:1px solid #fc8888; background-color: #fff1f1}

.btn-save {
    background-color: #0B3F88;
    border: 1px solid #0B3F88;
    color: #FFF;
    font-weight: 500;
    padding: 8px 15px;
    border-radius: 2px;
    font-family: GraphikMedium,'Sans Serif Collection';
    font-size: 13px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease- 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.profile-image-bx {
    width: 160px;
    height: 160px;
    overflow: hidden;
    border-radius: 50%;
    background-size: contain;
    background: #f5f5f5;
    margin: 0px auto;
}

.Userimg {
    width:160px;
    background-color: #f5f5f5;
    padding: 5px;
    height:160px;
    border-radius: 50%;
}

.profile-edit {
    width: 50px;
    height: 50px;
    background-color: #0086c4;
    border-radius: 50%;
    margin: 0px auto;
}

.profile-edit img { 
    width: 25px;
    text-align: center;
    margin: 5px 8px; }


.AttendanceSunday {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    color: #7C5A08 !important;
    background-color: #FFE7A5;
    border: 1px solid #BDCCDB;
    padding: 3px;
    font-weight: 700;
    border-bottom: 1px solid #7C5A08
}

.AttendanceSunday a {  color:#7C5A08 !important}
.AttendanceAbsent a:hover,a:focus {  color:#7C5A08 !important}

.AttendanceAbsent {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    color: #c52e2e !important;
    background-color: #F7D7DA;
    border: 1px solid #BDCCDB;
    padding: 3px;
    font-weight: 700;
    border-bottom: 1px solid #F2B0B6
}

.AttendanceAbsent a {  color:#c52e2e !important}
.AttendanceAbsent a:hover,a:focus {  color:#c52e2e !important}

.AttendancePresent {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #0D4D1B !important;
    background-color: #BCF2C9;
    border: 1px solid #BDCCDB;
    padding: 3px;
}

.AttendancePresent a {  color:#0D4D1B !important}
.AttendancePresent a:hover,a:focus {  color:#0D4D1B !important}

.AttendanceLeave {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #10535E !important;
    background-color: #9DE2EF;
    border: 1px solid #94DDEB;
    padding: 3px;
}

.AttendanceLeave a {  color:#10535E !important}
.AttendanceLeave a:hover,a:focus {  color:#10535E !important}


.sign-box { font-family:'Mulish',sans-serif;font-size:9px; 
            font-weight:700; text-align:left; margin:10px 0px 10px 0px }

.present-sign {
    color: #0D4D1B !important;
    background-color: #BCF2C9;
    border: 1px solid #BDCCDB;
    padding: 5px;
}
.absent-sign {
    color: #c52e2e !important;
    background-color: #F7D7DA;
    padding: 5px;
    border: 1px solid #F2B0B6;
}
.leave-sign {
    color: #10535E !important;
    background-color: #9DE2EF;
    border: 1px solid #94DDEB;
    padding: 5px;
}
.weekoff-sign {
    color: #7C5A08 !important;
    background-color: #FFE7A5;
    border: 1px solid #7C5A08;
    padding: 5px;
}
.notmarked-sign {
    color: #FFF !important;
    background-color: #B0B0B0;
    border: 1px solid #777777;
    padding: 5px;
}

.viewatt-sign {
    color: #FFF !important;
    background-color: #0a819c;
    border: 1px solid #0a819c;
    padding: 5px;
}

.viewatt-sign a { color:#FFF }
.viewatt-sign a:hover, a:focus { color:#FFF }
.download-btn {
    color: #FFF;
    font-family: 'Mulish',sans-serif;
    background-color: #0071A8;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    padding: 5px 5px 5px 5px;
    border: 1px solid #0381BF;
    border-radius:5px;
    margin:15px 0px 10px 0px;
}

.download-btn:hover{ color:#FFF !important; }
.download-btn:focus{ color:#FFF !important; }

/*-----------------  Education Table  DESIGN ---------------------------*/

.educationtable { margin:0px 10px 0px 10px; font-family:Verdana, Geneva, Tahoma, sans-serif; line-height:25px }
.othercoldetail { font-weight:bold ;}

.edutable {   
    width: 100%;   
    background-color: #FFFFFF;   
    margin: 1px 0 1px 0;   
    border: solid 1px #C0C0C0;   
    border-collapse:collapse;   
    
        
}  
.edutable td {  
    padding:4px 4px 0px 4px;   
    border: solid 1px #c1c1c1;   
    color: #000000;  
    font-size:11px;
    text-align:center;
}  
.edutable th {   
    background: #DFECFC;   
    border-left: solid 1px #C0C0C0;   
    color:#0b356c;  
    line-height:30px;  
    padding:0px 5px 0px 5px;
    font-size:12px;
    text-align:center;
    white-space:nowrap;
}  

.edutable tr:hover{ background-color:#f5f5f5; grid-column-sizing:auto }

.edutable .alt { background: #fcfcfc ; }  
.edutable .pgr { background: #708090 ; }  
.edutable .pgr table { margin: 5px 0; }  
.edutable .pgr td {   
    border-width: 0;   
    padding: 0 6px;   
    border-left: solid 1px #666;   
    font-weight: bold;   
    color: #fff;   
    line-height: 12px;   
    }     
.edutable .pgr a { color: #FFFFFF; text-decoration: none; }  
.edutable .pgr a:hover { color: #FFFFFF; text-decoration: none; }  


/*================= PMS CSS ================== */

.headcol { background-color:#f5f5f5 }
.fixedwidth { width:16.66% !important }
.fixedwidthn { width:30.66% !important }

.dimensionHead { font-family:'Mulish', sans-serif;font-size:13px; font-weight:700; color:#e21f26; background-color:#f5f5f5; border:1px solid #ddd;
                 padding:3px 5px 5px 0px; margin:0px 15px 0px 15px; min-height:30px }


.mainpanelPMS .form-control { font-size:13px; font-family:'Lato', sans-serif; padding:4px 10px }

.gridouterpanel { border:1px solid #0a819c }
.gridouterpanel-red { border:1px solid #bf4346 }
.gridouterpanel-green { border:1px solid #488c6c }
.gridouterpanel-yellow { border:1px solid #f2994b }
.gridouterpanel-orange { border:1px solid #e9662c }

/*=============== Multiline Textbox css ===============*/
.multiline {
    height: 50px !important;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-size: 12px !important;
}


/*================ NORMAL PMS CREATION CSS ================== */

.labeltext { font-family:Verdana, Geneva, Tahoma, sans-serif; font-size:11px}

.richtextbox { font-family:Verdana, Geneva, Tahoma, sans-serif ; font-size:11px !important; padding:2px; height:80px !important; border:1px solid #f4f4f4 !important  } 
.richtextbox:hover { border: 1px solid #c2cad8 !important}
.richtextbox:focus { border: 1px solid #c2cad8 !important}


/*================ USER PMS CREATION CSS ================== */

.userpms { width:100% }
.userpmstable { width:100%;font-size:11px; font-weight:400; border: 1px solid #C0C0C0 ; line-height:20px; 
                font-family:Verdana, Geneva, Tahoma, sans-serif }

.userpmstable .form-control { font-family:Verdana, Geneva, Tahoma, sans-serif ; font-size:11px !important; padding:2px  }

.userpmsrow {  background-color:#DDEAFC; color:#0b356c; font-weight:bold; color:#0b356c;line-height:25px }

.userpmscolone   { width:50px; text-align:center; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0 }
.userpmscoltwo   { width:200px; text-align:left; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0 }
.userpmscolthree { width:70px; text-align:center; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0 }
.userpmscolfour  { width:250px; text-align:left; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0 }
.userpmscolfive  { width:250px; text-align:left; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0 ; padding-right:5px}
.userpmscolsix   { width:250px; text-align:left; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0; padding-right:5px }
.userpmscolseven { width:80px; text-align:left; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0 ; padding-right:5px}
.userpmscoleight { width:200px; text-align:left; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0; padding-right:5px }



/*================ REPORTING MANAGER PMS CREATION CSS ================== */

.rptmgrpms { width:100% }
.rptmgrpmstable { width:100%;font-size:11px; font-weight:400; border: 1px solid #C0C0C0 ; line-height:20px; 
                font-family:Verdana, Geneva, Tahoma, sans-serif }

.rptmgrpmstable .form-control { font-family:Verdana, Geneva, Tahoma, sans-serif !important ; font-size:11px !important; padding:2px  }

.rptmgrpmsrow {  background-color:#DDEAFC; color:#0b356c; font-weight:bold; color:#0b356c;line-height:25px }

.rptmgrpmscolone   { width:20px;  text-align:center; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0}
.rptmgrpmscoltwo   { width:180px; text-align:left; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0}
.rptmgrpmscolthree { width:70px;  text-align:center; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0}
.rptmgrpmscolfour  { width:130px; text-align:left; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0}
.rptmgrpmscolfive  { width:200px; text-align:left; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0}
.rptmgrpmscolsix   { width:200px; text-align:left; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0}
.rptmgrpmscolseven { width:100px;  text-align:left; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0; padding-right:5px}
.rptmgrpmscoleight { width:150px; text-align:left; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0 }
.rptmgrpmscolnine  { width:100px; text-align:left; padding-left:5px; border-bottom:1px solid #C0C0C0;border-right:1px solid #C0C0C0; padding-right:5px }
.rptmgrpmscolten   { width:150px; text-align:left; padding-left:5px; border-bottom:1px solid #C0C0C0; padding-right:5px }



/*akshay code starts here 20 may*/
.verif-Mobb {
    position: absolute;
    bottom: 22px;
    right: 20px;
    color: #fff;
    background: #4bb647;
    border-radius: 28px;
    width: 17px;
    height: 17px;
    padding: 0px 2px;
}
@media (max-width: 475px) {
    .btn-bx { text-align:left ;margin: 10px 0px 0px 0px;}
.btn-menu { display:inline-block; margin:0px 0px 10px 0px }

.myCalendar { 
    font-size: 10px !important;
}
.myCalendarDay { width:10% !important }
.AttendanceAbsent { font-size:9px; width:10% !important }
.AttendanceLeave { font-size:9px; width:10% !important }
.AttendancePresent { font-size:9px; width:10% !important }
.AttendanceSunday { font-size:9px; width:10% !important }

.sign-box { }
.present-sign {display:inline-block; margin:0px 0px 10px 0px }
.absent-sign {display:inline-block }
.leave-sign {display:inline-block }
.weekoff-sign {display:inline-block }
.notmarked-sign {display:inline-block }

.myCalendar .myCalendarTitle { font-size: 20px !important;}
.myCalendar th.myCalendarDayHeader { font-size:9px }
.AttendanceSunday span { font-size:9px !important }

.calendar-month { font-size:13px !important }
.uncoded-batch { font-size:10px !important }
.green-batch {font-size:10px !important  }
.average-batch {font-size:10px !important  }
.red-batch {font-size:10px !important  }
.resigned-batch {font-size:10px !important  }

}

@media (max-width: 675px) {

.btn-bx { text-align:left ;margin: 10px 0px 0px 0px;}
.btn-menu { display:inline-block; margin:0px 0px 10px 0px }

.myCalendar { 
    font-size: 10px !important;
}
.myCalendarDay { width:10% !important }
.AttendanceAbsent { font-size:9px; width:10% !important }
.AttendanceLeave { font-size:9px; width:10% !important }
.AttendancePresent { font-size:9px; width:10% !important }
.AttendanceSunday { font-size:9px; width:10% !important }

.myCalendar .myCalendarTitle { font-size: 20px !important;}

.myCalendar th.myCalendarDayHeader { font-size:9px }
.AttendanceSunday span { font-size:9px !important }

.calendar-month { font-size:12px !important }
.uncoded-batch { font-size:7px !important }
.green-batch {font-size:7px !important  }
.average-batch {font-size:7px !important  }
.red-batch {font-size:7px !important  }
.resigned-batch {font-size:7px !important  }
}

/* =============== My Calendar Css =========== */
.myCalendar {
    background-color: #F2F2F2;
    width: 100%;
    border: 10px solid #D9E2EB !important;
    border-top: 0px !important;
    font-family: 'Mulish',sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.myCalendar a { text-decoration: none;  }  

.myCalendar .myCalendarTitle {  
    font-weight: bold;  
    height:50px;
    line-height:40px;
    background-color:#D9E2EB;
    color:#344E67;
    font-size:22px
}  
.myCalendar th.myCalendarDayHeader  
{
    height:30px;
    border-bottom: solid 1px #BDCCDB; 
    border-right: solid 1px #BDCCDB; 
    text-align:center
}
.myCalendar td.myCalendarDay {  
    border: solid 1px #BDCCDB;
    height:44px;
    max-height:44px;
}  
  .myCalendar td.myCalendarDay:nth-child(7) a{color:#c52e2e !important;}
.myCalendar .myCalendarNextPrev {  
    text-align: center;  
}  

.myCalendar .myCalendarNextPrev a  {font-size:1px;}
.myCalendar .myCalendarNextPrev:nth-child(1) a {
    color: #4CCAEF !important;
    background: url("../images/arrow-backward.png") no-repeat center center;
    background-size: 20px 20px;
    /*visibility:hidden*/
}
.myCalendar .myCalendarNextPrev:nth-child(1) a:hover,.myCalendar .myCalendarNextPrev:nth-child(3) a:hover{background-color:transparent;}
.myCalendar .myCalendarNextPrev:nth-child(3) a {
    color: #4CCAEF !important;
    background: url("../images/arrow-forward.png") no-repeat center center;
    background-size: 20px 20px;
    /*visibility:hidden*/
}
.myCalendar td.myCalendarSelector a {  
    background-color: #25bae5;  
}  

.myCalendar .myCalendarDayHeader a,
.myCalendar .myCalendarDay a,   
.myCalendar .myCalendarSelector a,  
.myCalendar .myCalendarNextPrev a {  
    display: block;  
    line-height:35px;  
}
.myCalendar .myCalendarToday {
    background-color: #496580;
    -webkit-box-shadow: 0 0 7px 3px #e5e5e5;
    box-shadow: 0 0 7px 3px #e5e5e5;
    color:#FFF;
}
.myCalendar .myCalendarToday a{color:#FFF !important;}
.myCalendar .myCalendarDay a:hover,   
.myCalendar .myCalendarSelector a:hover {  
    background-color: #D1DBE5;  
}

/*================= Custom Performance Calendar =====*/

.cal-no-pad { padding-right:0px; padding-left:0px }
.cal-no-pad-right { padding-right:0px; }
.cal-no-pad-left { padding-left:0px; }

.calendar-box { background-color: #D9E2EB;}
.calendar-box-inner { padding:10px 10px 10px 10px;}

.calendar-head {
    font-family: DINNextLTPro-Regular,'Sans Serif';
    color: #344E67;
    font-size: 22px;
    font-weight:600;
    text-align:center;
    padding:0px 0px 5px 0px
}

.calendar-month {
    background-color: #F2F2F2;
    font-family: Mulish,sans-serif;
    border: solid 1px #3D3D3D;
    text-align: center;
    font-weight: 700;
    color: #2D3338;
    padding: 10px 5px 10px 5px;
    font-size: 14px;
    height: 79px
}

.green { background-color:#BCF2C9 }
.average { background-color:#FFE7A5 }
.red { background-color:#F7D7DA}
.resigned { background-color:#9DE2EF }
.uncoded { background-color:#DAD9D9 }

.remarks-batch {
    margin:10px 0px 10px 0px;
    font-family: 'Mulish','Sans Serif';
}

.green-batch {
    color: #0D4D1B !important;
    background-color: #6DED8C;
    border: 1px solid #269B42;
    padding: 5px;
    border-radius:5px;
    font-size:9px
}

.resigned-batch {
    color: #10535E !important;
    background-color: #61D1E6;
    border: 1px solid #2C9EB3;
    padding: 5px;
    border-radius: 5px;
    font-size: 10px
}

.red-batch {
    color: #FFF !important;
    background-color: #ED626F;
    padding: 5px;
    border: 1px solid #AC2B37;
    border-radius: 5px;
    font-size: 10px
}

.average-batch {
    color: #7C5A08 !important;
    background-color: #E2B333;
    border: 1px solid #7C5A08;
    padding: 5px;
    border-radius: 5px;
    font-size: 10px
}

.uncoded-batch {
    color: #444 !important;
    background-color: #BEBEBE;
    border: 1px solid #7F7F7F;
    padding: 5px;
    border-radius: 5px;
    font-size: 10px;
}

.uncoded-sign {
    color: #444 !important;
    background-color: #BEBEBE;
    border: 1px solid #7F7F7F;
    padding: 5px;
}

/*============= Investment Declaration ============*/

.page-title-it {
    font-family: 'Rubik',sans-serif;
    font-size:18px;
    color: #E21F26;
    text-align: left;
    font-weight: 500;
    padding: 7px 5px;

}

.employee-details {
    font-family: 'Rubik',sans-serif;
    font-size:13px;
    color: #444;
    text-align: left;
    font-weight: 500;
    padding: 7px 5px;
}

.note-pt {
    color: #10535E !important;
    background-color: #9DE2EF;
    border: 1px solid #94DDEB;
    padding: 5px;
    font-family: 'Rubik',sans-serif;
    font-weight: 500;
    font-size:15px;
    display: block;
    margin: 5px 0px 5px 0px;
}

.note-pt-bx {
    border: 1px solid #94DDEB;
    border-top:unset;
    padding:5px 5px 5px 5px;
    margin:-5px 0px 10px 0px;
}

.btn-bx {
    margin: 10px 10px 0px 10px;
    text-align:right
}

.radio-toolbar {
  margin: 10px 10px 0px 10px;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.radio-toolbar label {
    display: inline-block;
    background-color: #fff;
    padding: 8px 16px;
    font-family: 'Rubik',sans-serif;
    font-size: 15px;
    border: 1px solid #444;
    border-radius: 4px;
    text-align:center;
    font-weight:500;
}

.radio-toolbar label:hover {
  background-color: #023A71;
  color:#FFF;
  cursor:pointer;
}

.radio-toolbar input[type="radio"]:focus + label {
    border: 2px dashed #444;
}

.radio-toolbar input[type="radio"]:checked + label {
    background-color: #023A71;
    border:1px solid #023A71;
    color:#FFF
}


.submitbtn {
    padding: 7px 15px;
    font-family: 'Mulish',sans-serif;
    color: #FFF;
    font-size: 15px;
    text-decoration: none;
    font-weight:600;
    text-align: center;
    border: 1px solid #FFF;
    border-radius: 5px;
    margin: 5px 0px 5px 0px;
}

.submitbtn:hover { text-decoration:none}

.redbg-btn { background: #e21f26; }
.redbg-btn:hover { background: #B71616; }

.tds-header {
    background-color: #ACACAC;
    font-family: 'Rubik',sans-serif;
}

.tds-details {
    font-family: Mulish,sans-serif;
    font-size: 14px;
    font-weight:700;
    color: #444;
}

.col-pad { padding:5px 5px 5px 5px !important }

.link {
    font-family: Mulish,sans-serif;
    font-weight: 700;
    font-size: 11px;
}

.popup-content { text-align:center; font-family:'Mulish',sans-serif; color:#333; font-weight:700 }

/*=============== Promotion ===========*/

.prom-head {
    font-family: Mulish,sans-serif;
    text-align: left;
    font-weight:700;
}

.per-year { float:right; } 

.per-emp-details {width:100%}
.per-emp-details table {
    width: 100%;
    font-family: DINNextLTPro-Regular,sans-serif;
    border: 1px solid #7C838D
}

.per-head {
    background-color: #D9E8F9;
    border: 1px solid #59616E;
    line-height: 22px;
    font-size: 17px;
    color: #333;
    padding: 5px;
    font-weight: 500;
}

.per-colone {
    width: 20%;
    padding: 5px;
    font-weight: 700;
    color: #333;
    text-align: left;
    font-family: Mulish,sans-serif;
    font-size: 14px;
    background-color: #F4F4F4;
    border-right: 1px solid #BEBEBE;
    border-bottom: 1px solid #BEBEBE
}
.per-coltwo {
    width: 30%;
    padding: 5px;
    font-weight:700;
    color: #444;
    text-align: left;
    font-family: Mulish,sans-serif;
    font-size: 14px;
    border-right: 1px solid #BEBEBE;
    border-bottom: 1px solid #BEBEBE
}

.talent-section {
    background-color: #ABCEF5;
    border: 1px solid #59616E;
    line-height: 22px;
    font-size: 17px;
    color: #333;
    padding: 5px;
    font-weight: 500;
    font-family: DINNextLTPro-Regular,sans-serif;
}
.tal-emp-details {width:100%}
.tal-emp-details table {
    width: 100%;
    font-family: DINNextLTPro-Regular,sans-serif;
    border: 1px solid #7C838D;
}

.tal-row { background-color: #F4F4F4; }

.tal-colone {
    width: 25%;
    padding: 5px;
    font-weight: 700;
    color: #444;
    text-align: left;
    font-family: Mulish,sans-serif;
    font-size: 14px;
    border-right: 1px solid #BEBEBE;
    border-bottom: 1px solid #BEBEBE;
}

.tal-coltwo {
    width: 25%;
    padding: 5px;
    font-weight: 700;
    color: #444;
    text-align: left;
    font-family: Mulish,sans-serif;
    font-size: 14px;
    border-right: 1px solid #BEBEBE;
    border-bottom: 1px solid #BEBEBE
}

.tal-colthree {
    width: 25%;
    padding: 5px;
    font-weight: 700;
    color: #444;
    text-align: left;
    font-family: Mulish,sans-serif;
    font-size: 14px;
    border-right: 1px solid #BEBEBE;
    border-bottom: 1px solid #BEBEBE
}

.tal-colfour {
    width: 25%;
    padding: 5px;
    font-weight: 700;
    color: #444;
    text-align: left;
    font-family: Mulish,sans-serif;
    font-size: 14px;
    border-right: 1px solid #BEBEBE;
    border-bottom: 1px solid #BEBEBE
}

.new-pms-msg {
    float:right;
    margin:10px 10px 3px 0px;
}

.pms-employee-details {
    font-family: 'Rubik',sans-serif;
    font-size: 14px;
    color: #444;
    text-align: left;
    font-weight: 500;
    padding: 7px 5px;
}

.panel.panel-blue-new {
    border-color: #D9E8F9;
}

.panel.panel-blue-new > .panel-heading {
    color: #FFFFFF;
    background: #D9E8F9;
    border-color: #D9E8F9 !important;
}

.gridouterpanel-blue-dark {
    border: 1px solid #59616E;
}

.rating-btn-bx { text-align:right;margin:35px 0px 5px 0px }

.rating-btn {
    font-family:'Rubik',sans-serif;
    font-size:15px;
    font-weight:500;
    padding:5px 15px;
    border:1px solid #0b356c;
    color:#0b356c;
    background-color:#F5F5F5;
    border-radius:5px
}

.my-request_box{
    display:flex;

}

/*============= Income Tax ==============*/

.itd-bx { width:100%; margin:auto auto 0px 30px;
          padding:30px 30px 0px 30px
}

.itbtn-welcome {
    display: inline-block;
    background-color: #fff;
    padding: 8px 16px;
    font-family: 'Inclusive Sans',sans-serif;
    font-size: 15px;
    border: 2px solid #444;
    border-radius: 4px;
    text-align: center;
    font-weight: 700;
    color:#333;
    width:80%
}

.itbtn-welcome:hover, .itbtn-welcome:focus {
    background-color: #023A71;
    border: 1px solid #023A71;
    color: #FFF
}



/*============= HR Induction Css Start ===============*/

.instruction-bx {
    font-family: 'Inter',sans-serif;
    font-weight: 500;
    color: #000;
    text-align: left;
    font-size: 13px;
    line-height: 25px;
}

.instruction-bx ol {
    margin: 20px 10px 20px 0px;
    text-align: left;
    font-size: 13px;
    line-height: 25px;
}

.vid-thumbnail-bx {
    border: 1px solid #C7C7C7;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: #F5F5F5
}
.vid-thumbnail-bx .inner-bx-vid { padding:10px 10px 10px 10px; border-radius:8px}
.vid-thumbnail-bx .inner-bx-vid img { width:100%; margin:0px auto}

.video-title {
    font-family: 'Inter',sans-serif;
    font-size: 17px;
    color: #fff;
    padding: 7px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    font-weight: 700;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    background-color: #ffffff;
    background-image: linear-gradient(43deg, #ad1b21 0%, #E1494F 46%, #c71b22 80%);
    text-align: center
}

.btn-blue-dash {
    padding: 4px 6px;
    font-family: 'Mulish',sans-serif;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    background-color: #0B5ED7;
    border: 2px solid #98C1FE;
    font-size: 10px;
}

.btn-box a {color:#FFF }
.btn-box a:hover, a:focus {color:#FFF; border:1px solid #FFF }

/*============== Ribbon Css =================*/
/* common */
.ribbon {
    width: 112px;
    height: 112px;
    overflow: hidden;
    position: absolute;
}

    .ribbon::before,
    .ribbon::after {
        position: absolute;
        z-index: -1;
        content: '';
        display: block;
        border: 5px solid #2980b9;
    }

    .ribbon div {
        position: absolute;
        display: block;
        width: 200px;
        padding: 4px 0 6px 0px;
        background-color: #3498db;
        box-shadow: 0 5px 10px rgba(0,0,0,.1);
        color: #fff;
        font: 700 12px/1 'Sintony', sans-serif;
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        text-transform: capitalize;
        text-align: center;
    }

/* top left*/
.ribbon-top-left {
    top: 0px;
    left: 15px;
}

    .ribbon-top-left::before,
    .ribbon-top-left::after {
        border-top-color: transparent;
        border-left-color: transparent;
    }

    .ribbon-top-left::before {
        top: 0;
        right: 0;
    }

    .ribbon-top-left::after {
        bottom: 0;
        left: 0;
    }

    .ribbon-top-left div {
        right: -30px;
        top: 25px;
        transform: rotate(-45deg);
    }

/* top right*/
.ribbon-top-right {
    top: -10px;
    right: -10px;
}

    .ribbon-top-right::before,
    .ribbon-top-right::after {
        border-top-color: transparent;
        border-right-color: transparent;
    }

    .ribbon-top-right::before {
        top: 0;
        left: 0;
    }

    .ribbon-top-right::after {
        bottom: 0;
        right: 0;
    }

    .ribbon-top-right div {
        left: -25px;
        top: 30px;
        transform: rotate(45deg);
    }

/* bottom left*/
.ribbon-bottom-left {
    bottom: -10px;
    left: -10px;
}

    .ribbon-bottom-left::before,
    .ribbon-bottom-left::after {
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .ribbon-bottom-left::before {
        bottom: 0;
        right: 0;
    }

    .ribbon-bottom-left::after {
        top: 0;
        left: 0;
    }

    .ribbon-bottom-left div {
        right: -25px;
        bottom: 30px;
        transform: rotate(225deg);
    }

/* bottom right*/
.ribbon-bottom-right {
    bottom: -10px;
    right: -10px;
}

    .ribbon-bottom-right::before,
    .ribbon-bottom-right::after {
        border-bottom-color: transparent;
        border-right-color: transparent;
    }

    .ribbon-bottom-right::before {
        bottom: 0;
        left: 0;
    }

    .ribbon-bottom-right::after {
        top: 0;
        right: 0;
    }

    .ribbon-bottom-right div {
        left: -25px;
        bottom: 30px;
        transform: rotate(-225deg);
    }


.ribbon-success {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5cb85c), color-stop(100%, #3d8b3d));
    background-image: -moz-linear-gradient(top, #5cb85c 0%, #3d8b3d 100%);
    background-image: -webkit-linear-gradient(top, #5cb85c 0%, #3d8b3d 100%);
    background-image: linear-gradient(to bottom, #5cb85c 0%, #3d8b3d 100%);
}

.ribbon-pending {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f0ad4e), color-stop(100%, #df8a13));
    background-image: -moz-linear-gradient(top, #f0ad4e 0%, #df8a13 100%);
    background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #df8a13 100%);
    background-image: linear-gradient(to bottom, #f0ad4e 0%, #df8a13 100%);
}

.ribbon-warning {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d9534f), color-stop(100%, #b52b27));
    background-image: -moz-linear-gradient(top, #d9534f 0%, #b52b27 100%);
    background-image: -webkit-linear-gradient(top, #d9534f 0%, #b52b27 100%);
    background-image: linear-gradient(to bottom, #d9534f 0%, #b52b27 100%);
}

.ribbon-info {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5bc0de), color-stop(100%, #28a1c5));
    background-image: -moz-linear-gradient(top, #5bc0de 0%, #28a1c5 100%);
    background-image: -webkit-linear-gradient(top, #5bc0de 0%, #28a1c5 100%);
    background-image: linear-gradient(to bottom, #5bc0de 0%, #28a1c5 100%);
}

.performence_header { display: flex; justify-content: space-between;}
.performence_header input { width: 20px; height: 20px;}

.check-sts {
    color: #104892;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    padding: 0px 10px 0px 10px;
    text-decoration: underline;
}


.salry-ben { width:100%;border:1px solid #272727 }
.salry-ben table { width:100%; line-height:25px;font-family:'GraphikMedium',sans-serif; font-weight:500; color:#222; font-size:13px }
.salinfo-colone { width:50%;border-right:1px solid #272727;border-bottom:1px solid #272727; padding:3px 3px 3px 3px  }
.salinfo-coltwo { width:25%;border-right:1px solid #272727;border-bottom:1px solid #272727; padding:3px 3px 3px 3px  }
.salinfo-colthree { width:25%;border-bottom:1px solid #272727; padding:3px 3px 3px 3px  }

.salinfo-bg { background-color: #0a819c; font-size:15px; border-top:none !important;color:#FFF }
.salinfo-bg2 { background-color:#e5e5e5; }
.salinfo-bg3 { background-color:#FCFDFE; }
.salinfo-bold { font-weight:500 }


/*-----------------  Education Table  DESIGN ---------------------------*/

.other-detail-table { font-family:Mulish,sans-serif; width:100% }

.other-detail-table table{ width:100%; border:1px solid #C0C0C0; text-align:left;line-height:23px }
.other-detail-table .other-colone { 
    border-right: solid 1px #C0C0C0; 
    border-bottom: solid 1px #C0C0C0;
    width:25%;
    font-weight:800;
    text-align:left; padding:4px 4px 4px 4px;
    background: rgb(223, 236, 252);
    color: rgb(11, 53, 108);
    font-size:13px;
}
.other-detail-table .other-coltwo { 
    border-right: solid 1px #C0C0C0; 
    border-bottom: solid 1px #C0C0C0;
    width:25%;
    font-weight:600;
    color:#000;
    text-align:left; padding:4px 4px 4px 10px;
    font-size:13px
}

.educationtable { margin:0px 10px 0px 10px; font-family:Verdana, Geneva, Tahoma, sans-serif; line-height:25px }
.othercoldetail { font-weight:bold ;}

.edutable {   
    width: 100%;   
    background-color: #FFFFFF;   
    margin: 1px 0 1px 0;   
    border: solid 1px #C0C0C0;   
    border-collapse:collapse;   
    
        
}  
.edutable td {  
    padding:4px 4px 0px 4px;   
    border: solid 1px #c1c1c1;   
    color: #000000;  
    font-size:11px;
    text-align:center;
}  
.edutable th {   
    background: #DFECFC;   
    border-left: solid 1px #C0C0C0;   
    color:#0b356c;  
    line-height:30px;  
    padding:0px 5px 0px 5px;
    font-size:12px;
    text-align:center;
    white-space:nowrap;
}  

.edutable tr:hover{ background-color:#f5f5f5; grid-column-sizing:auto }

.edutable .alt { background: #fcfcfc ; }  
.edutable .pgr { background: #708090 ; }  
.edutable .pgr table { margin: 5px 0; }  
.edutable .pgr td {   
    border-width: 0;   
    padding: 0 6px;   
    border-left: solid 1px #666;   
    font-weight: bold;   
    color: #fff;   
    line-height: 12px;   
    }     
.edutable .pgr a { color: #FFFFFF; text-decoration: none; }  
.edutable .pgr a:hover { color: #FFFFFF; text-decoration: none; } 

.font-bold { font-weight:600 }

/*=========== E - Resignaiton ===========*/
.e-col1 { width:15%; background-color: #f5f5f5;font-weight:600 }
.e-col2 { width:25% }
.e-col3 { width:20% }
.e-col4 { width:10% }
.e-col5 { width:10% }
.e-col6 { width:20% }

.headcol2 { background-color:#DFECFC }

/*============= HR Induction Css End ===============*/

@media only screen and (min-device-width : 280px) and (max-device-width :575px) {
    .btn-bx {
        display: flex;
        margin: 10px 0px 0px 0px;
        flex-wrap: wrap;
    }
    .mg-0{
        margin:0px!important;
    }
    .btn-menu {
        font-size: 8px;
    }
    .btn-bx a {
        margin-right: 5px;
    }
        .btn-bx a:last-child {
            margin-right: 0px;
        }
    .dropdown-menu.pull-right {
        right: 0;
        left: 0!important;
    }
}
@media only screen and (min-device-width : 576px) and (max-device-width :768px) {
    .btn-bx {
        display: flex;
        margin: 10px 0px 0px 0px;
    }
    .btn-menu {
        font-size: 8px;
     }
    .btn-bx a {
        margin-right: 5px;
    }
        .btn-bx a:last-child {
            margin-right: 0px;
        }
}
@media only screen and (min-device-width :992px) and (max-device-width :1300px) {
    .btn-menu {
        font-size:10px;
    }
    .btn-bx  a{
        margin-right:5px;
        
    }
        .btn-bx a:last-child{
            margin-right:0px;
        }
    .btn-bx {
        /* margin: 0px;
        padding: 5px 0px;
        display: flex;
        justify-content: end;
        text-align: unset !important;*/
        padding: 3px 0px;
    }
    #sum_box h4, #sum_box .crd_body h4 {
        font-size: 14px;
    }
    #sum_box .icon {
        color: #777777;
        font-size: 40px;
        margin-bottom: 0px px;
        float: right;
    }
    
}



.mb-10 {
    margin-bottom: 10px !important;
}
.greenborder {
    border: 2px solid green;
}

.redborder {
    border: 1px solid red;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    /* cursor: not-allowed; */
    background-color: #fff;
    /* opacity: 1; */
}

.spacetop {
    margin-top: 10px;
}


.rat-bx 
{
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #222;
    padding: 5px 10px 5px 10px;
    border: 1px solid #C0C0C0;
    background: #F5F5F5;
    margin:0px 0px 10px 0px
}
.verifyicon i {
    color: #fff !important;
    float: right;
    margin: -25px 10px 0px 0px;
    background-color: #4BB647;
    padding: 2px 3px 3px 3px;
    border-radius: 50%;
    font-size: 12px;
}
.profile-img {
    width: 146px;
    height: 184px;
    padding: 5px 5px 5px 5px;
    margin: 0px 0px 5px 0px;
    border: 1px solid #A4A4A4
}

    .profile-img img {
        max-width: 135px;
        max-height: 170px !important;
        height: 170px !important
    }

.signature-img {
    width: 320px;
    height: 90px;
    padding: 5px 5px 5px 5px;
    margin: 0px 0px 5px 0px;
    border: 1px solid #A4A4A4
}

    .signature-img img {
        max-width: 315px !important;
        max-height: 80px !important;
    }

.required-sign {
    color: #E21F26;
    font-size: 12px;
    font-weight: 600
}

.alert-msg {
    font-family: aptos, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #E4101E !important;
    background-color: #FFEEDB;
    border: 1px solid #FABFA7;
    padding: 5px;
    border-radius: 4px !important;
}
.doc_download {
    margin-bottom: 15px;
}
.required-sign {
    color: #E21F26;
    font-size: 12px;
    font-weight: 600
}

.alert-msg {
    font-family: aptos, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #E4101E !important;
    background-color: #FFEEDB;
    border: 1px solid #FABFA7;
    padding: 5px;
    border-radius: 4px !important;
}

.infocontainer {
    width: 100%;
    padding: 10px 10px 0px 10px;
    border: 1px solid var(--drkpurp);
    border-top: none;
    
}
.topspace{
    padding-top:10px;
}