@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
body {margin: 0; background: #edf1f4; font-family: 'Nunito', Arial, 'Helvetica-Neue', sans-serif; height: 100%; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; font-weight: 300;}
strong, b {font-weight: bold; color: #333;}
.homebg {padding: 0; margin: 0; height: 100vh; background-position: center; background-size: cover;  background-image: url(../imgs/school_bg.jpg);}
.homebg .layer {background-color: rgba(0,0,0,0.4); height: 100vh;}
.shadow {background-color: rgba(0,0,0,0.9); padding:20px 0; text-align: center; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px;}
.shadow li {list-style: none; display: inline-block; text-align: center; margin: 0 auto;}
.shadow li a {color: #fff; margin: 0 10px; text-align: center;}
.shadow li a:hover {outline: none; text-decoration: none;}
.text-danger {
  color: #a94442;
}

.badge-success {background:#093 !important; color: #fff !important;}
.badge-danger {background:#DC3545 !important; color: #fff !important;}
.badge-primary {background:#337ab7 !important; color: #fff !important;}
.badge-info {background:#d9edf7 !important; color: #fff !important;}
.badge-warning {background:#fcf8e3 !important; color: #fff !important;}
.myschools {margin: 0 auto; padding: 0 10px; max-width: 550px;}
.myschools h2 {text-align: center; border-top-left-radius: 4px; border-top-right-radius: 4px; margin-bottom: 0; margin-top: 40px; padding: 20px 0; background-color: #2c2c2c; font-weight: bold; color: #fff; font-size: 20px;}
.myschools h2 a:hover {color: #fff; text-decoration: none; outline: none;}
.myschools .block {padding:20px; border: 1px solid #888; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-top: none; margin: 0 auto; height: auto; background: #FFF;}
.myschools .block label {font-size: 14px; font-weight: bold; color: #2c2c2c;}
.myschools .block .form-control {border-top: none; border-right: none; border-left: none; box-shadow: none; padding-left: 0; border-radius: 0; border-bottom: 1px solid #aaa;}
.myschools .btn {background: #2c2c2c; box-shadow: 0 2px 2px rgba(0,0,0,.05), inset 0 -2px 0 rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.3); width: 100%; padding: 7px 15px 9px; font-size: 16px; color: #fff; border: #2c2c2c solid 1px;}
.myschools .btn:focus {outline: none;}
.myschools .error {margin: 0 0 10px; width:100%; color: #c9302c; text-align: center;}
@media (max-width: 768px){
.myschools {height: auto; max-width: 350px; margin: 30px auto; padding: 0;}
.myschools .block {max-width: 350px;}}

/* app_main */
.app_main {background-color: #fff; color: #111; }
.app_main .bg_logo {background-image: url('../imgs/favicon.png'); background-size: cover; background-position: center; margin:0 auto; height: 40px; width: 40px;}
.app_main_left {background-image: url('../imgs/school_bg.jpg'); background-size: cover; background-position: center; padding: 0; }
.app_main_left .app_main_dark {background-color:rgba(0,0,0,0.6); padding: 60px; min-height: 100vh; height: 100%;}

.app_main h2 {font-size: 25px; line-height: 30px; margin: 25px 0 0; font-weight: bold; color: #fff; }
.app_main .slider {width: 100%; max-width: 600px; border-radius: 12px; height: 600px; overflow: hidden; position: relative;}
.app_main .slider-track { display: flex; transition: transform 0.5s ease-in-out; width: 100%;}
.app_main .slide {margin: 20px 0; display: flex; padding: 30px 20px; height:auto; border-radius: 12px; min-width: 100%; background-color: #f0f0f0;}
.app_main .slide .startnumber {width: 70px; height: 45px; text-align: center; padding: 7px 13px; background-color: #1f2f50; color:#fff; margin:0; border-radius: 4px; font-size: 18px; margin-right: 20px;}
.app_main .slide h5 {font-size: 20px; line-height: 24px; font-weight: 700; border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 20px;}
.app_main .slide p {font-size: 13px; line-height: 21px; font-weight: 400; margin-bottom: 10px;}
.app_main .copyright {margin-top: 35px; font-size: 12px; text-align: center; line-height: 18px;}

.app_main .myschool {margin: 0 auto; padding: 0 10px; max-width: 450px; }
.app_main .myschool h2 {text-align: center; border-top-left-radius: 4px; border-top-right-radius: 4px; margin-bottom: 0; margin-top: 40px; padding: 20px 0; background-color: #2c2c2c; font-weight: bold; color: #fff; font-size: 20px;}
.app_main .myschool h2 a:hover {color: #fff; text-decoration: none; outline: none;}
.app_main .myschool .block {padding:20px; border: 1px solid #888;border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-top: none; margin: 0 auto; height: auto; background: #FFF;}
.app_main .myschool .block label {font-size: 16px; font-weight: bold; color: #2c2c2c;}
.app_main .myschool .block .form-control {border-top: none; border-right: none; border-left: none; box-shadow: none; padding-left: 0; border-radius: 0; border-bottom: 1px solid #aaa;}
.app_main .myschool .toggle-password {position: absolute; top: 45px; right: 25px; cursor: pointer; color: #2c2c2c;}
.app_main .myschool .toggle-password:hover {color: #111111;}
.app_main .myschool .btn {background: #2c2c2c; box-shadow: 0 2px 2px rgba(0,0,0,.05), inset 0 -2px 0 rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.3); width: 100%; padding: 7px 15px 9px; 
font-size: 14px; color: #fff; border: #2c2c2c solid 1px; margin-bottom: 15px;}
.app_main .myschool .btn:focus {outline: none;}
.app_main .myschool .error {margin: 0 0 10px; width:100%; color: #c9302c; text-align: center;}
.app_main .myschool .block a {color: #2c2c2c; text-decoration: none; outline: none; font-size: 12px; }

@media(max-width: 768px){
.app_main {padding-top: 20px;}
.app_main_left {display:none;}
.app_main h2 {font-size: 18px;}
.app_form_right {padding: 0px 20px;}}


/* pagetop */
.pagetop {height:63px; border-bottom:1px solid #f4c50d; background:#2c3090; position: fixed; z-index: 999; width: 100%; box-shadow:0 4px 4px rgba(0,0,0,0.3);}
.pagetop img {font-size: 12px; margin-top: 0px; height: 20px; width: auto; display: inline-block; margin-right: 10px; margin-left: 10px;}
.pagetop a {font-size: 16px; color: #fff; text-align: center; font-weight: bold; width: 175px; margin-right: 20px; margin-top: 15px; margin-left: 20px; z-index: 9999; text-decoration: none; display: inline-block;}
.pagetop a:focus, .pagetop a:hover {outline: none; text-decoration: none;}
.pagetop .toggler {padding: 0; border: 1px solid transparent; background-color: transparent; outline: none; width: 40px; height: 100%; margin: 0; transition: 0.4s all;}
.pagetop .toggler i {font-size: 16px; display: block; text-align: center; padding: 15px auto; margin: 20px auto;}
.pagetop .toggler:hover, .pagetop .toggler:focus, .pagetop .toggler:active {border: 1px solid transparent; background-color: rgba(0,0,0,0.6); cursor: pointer; outline: none; border-radius: 0;}
.pagetop .mystat {display: inline; color: #fff;}
.pagetop .mystat:hover, .pagetop .mystat:focus {color: #fff; outline: none; text-decoration: none;}
.pagetop .mystat p {font-size: 11px; float: right; text-align: right; border-radius: 4px; background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)); padding: 3px 15px; margin: 8px 10px 0;}
.pagetop .mystat p > span {font-size: 11px; text-decoration: underline; font-weight: lighter;}
@media (max-width: 480px){
.pagetop .mystat {display: none;}}

/* pagecontent */
#pagecontent {display: block; background-color: #edf1f4; width: 100%; margin: 0; padding: 0; margin-top: 63px; min-height: calc(100vh - 63px); position: absolute; z-index: 1;}

/* sidebar */
#sidebar {background-color: #2c3090; height: 100vh; height: 100%;overflow-y: auto; padding: 0; overflow-x: hidden; margin-bottom: 30px; transition: 0.4s all; width: 260px; z-index: 99; 
display: block; position: fixed;}
#sidebar::-webkit-scrollbar-track {border: 1px solid #fff; background-color: #fff; padding: 2px 0;}
#sidebar::-webkit-scrollbar {width: 10px; background-color: #424858;}
#sidebar::-webkit-scrollbar-thumb {border-radius: 10px;box-shadow:inset 0 0 6px #424858; background-color:rgba(0,0,0,0.2); border:1px solid #f7f7f7;}
#sidebar a {text-decoration: none; outline: none; text-transform: capitalize;}

/* sidenav */
.sidenav {padding: 0; list-style: none;margin: 0;}
.sidenav li.side {display: block; width: 100%; line-height: 23px;padding: 0;margin: 0;margin-bottom: 1px;}
.sidenav li.side:last-child {margin-bottom: 80px;}
.sidenav li.side a {padding:4px 10px;color: #fff;text-decoration:none;display:block;transition:0.4s all;font-size:13px;outline:none; position:relative;}
.sidenav li.side a.active {background-color: rgba(0,0,0,0.6);}
.sidenav li.side a:hover {text-decoration: none; color: #fff; outline: none;background-color: rgba(0,0,0,0.6);}
.sidenav li.side a i {color: #fff; display: inline-block;font-weight: bold; margin-right: 10px;margin-left: 10px;}
.sidenav li.side button {width: 100%; border: none; color: #fff; padding:4px 10px; line-height: 28px; text-align: left; transition:0.4s all; background: transparent;}
.sidenav li.side button i {color: #fff; display: inline-block;font-weight: bold; margin-right: 10px;margin-left: 10px;}
.sidenav li.side button:hover, .sidenav li.side button:focus {text-decoration: none; color: #fff; outline: none;background-color: rgba(0,0,0,0.6);}
.sidenav li.side a .fa-caret-right {float: right;color: #f39c12; line-height: 23px;}
.sidenav li.side .dropbox {line-height:20px;display:none;background-color:rgba(0,0,0,0.2);transition:0.4s ease-in-out;color:#1976d2;}
.sidenav li.side .dropbox a {text-indent: 5px; display: block; font-size: 11px; padding: 3px 10px;}
.sidenav li.side .dropbox a i {display: inline-block; line-height: 20px;}
.sidenav li.side .dropbox a:hover {text-decoration: none; background-color: rgba(0,0,0,0.6);}
.sidenav li.side .dropbox li a:focus {outline: none;}

/* maincontent */
#maincontent.menuDisplayed #sidebar {width: 200px; z-index: 0; display: none;}
#maincontent.menuDisplayed #pagecontent {padding-left: 0;}
#maincontent.menuDisplayed .mainbody {z-index: 1; position: relative; width: 100%; padding-left: 0;}
@media (max-width: 768px){
#sidebar {display: none;}
.mainbody {padding-left: 0px; padding-right: 0px;}
#maincontent.menuDisplayed #sidebar {width: 260px; z-index: 99; display: block;}
#maincontent.menuDisplayed #pagecontent {padding-left: 0; position: absolute; z-index: 1;}
#maincontent.menuDisplayed .mainbody {z-index: 0; position: fixed; padding-left: 0px !important;}}

/* mainbody */
.mainbody {position: relative; padding: 10px; padding-left: 270px; z-index: 1;}
.mainbody h1 {font-size: 33px; line-height: 22px; color: #30adf4; font-weight: bold; }
.mainbody h1 span {font-size: 15px; text-transform: capitalize; color: #777; line-height: 15px; margin-left: 5px; font-weight: 300;}
.mainbody .btn:focus {outline: none;}
@media(max-width: 768px){.mainbody{padding-right: 0; padding-left: 0;}}

/* current */
.mainbody .current {padding: 5px 10px; background-color: #fff; border:1px solid #ccc; margin-bottom: 20px; width: 100%}
.mainbody .current a {font-size: 14px; margin: 0; padding:0; color: #193193; font-weight: bold; }
.mainbody .current a:hover {text-decoration: underline;}
.mainbody .current span {width: 20px; display: inline-block; text-align:center;}
.mainbody .sright {margin: 0 15px 0;}
.mainbody .sright select {background: #fff; border:1px solid #ccc; height:30px; font-weight: bold; font-size: 13px; margin-right: 15px; padding: 4px 10px; }
.mainbody .sright select option {font-weight: bold; width: 90px;}
.mainbody .sright .add {margin-top: -1px !important; height: 30px !important; font-size: 10px !important; width: 120px !important;}

/* sright */
.mainbody .sright {margin: 15px;}
.mainbody .sright .atts {display: flex; flex-wrap: wrap}
.mainbody .sright .atts select {background: #fff; border:1px solid #ccc; border-radius:4px; font-weight: bold; font-size: 13px; margin-right: 15px; padding: 4px 10px; margin-bottom: 5px; box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);}
.mainbody .sright .atts select option {font-weight: bold; }
.mainbody .sright .atts input[type="file"] {padding: 4px 10px; height: 30px; box-shadow:inset 0 3px 6px rgba(0,0,0,0.1); margin-right:15px; margin-bottom:5px; border-radius: 4px;}
.mainbody .sright .atts input[type="date"] {display: inline-block; box-shadow: inset 0 3px 6px rgba(0,0,0,0.1); background:#fefefe url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png) 97% 50% no-repeat; height:30px  !important; margin-right: 15px; margin-bottom: 5px; border-radius: 4px;}
.mainbody .sright .atts input[type="date"]::-webkit-inner-spin-button {display: none;}
.mainbody .sright .atts input[type="date"]::-webkit-calendar-picker-indicator {opacity: 0;}
.mainbody .sright .add {margin-top: -0.5px !important; height: 30px !important; font-size: 10px !important; min-width: 70px !important;}
.mainbody .sright .atts .add {padding-top: 7px; height: 29px !important; box-shadow: inset 0 3px 6px rgba(0,0,0,0.1)}

/* upload */
.mainbody .sright .atts_upl .form-group1 {width: 50% !important; margin-bottom: 5px;}
.mainbody .sright .atts_upl .form-group2 {width: 20% !important; margin-bottom: 10px;}
.mainbody .sright .atts_upl select {background: #fff; border:1px solid #ccc; border-radius:4px; font-weight: bold; font-size: 13px; margin-right: 15px; padding: 4px 10px; margin-bottom: 5px; width:96% !important; box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);}
.mainbody .sright .atts_upl select option {font-weight: bold;}
.mainbody .sright .atts_upl .form-group2 input[type="text"] {width: 96% !important; padding:4px 10px; height:30px; box-shadow:inset 0 3px 6px rgba(0,0,0,0.1);}
.mainbody .sright .atts_upl .form-group .add {margin-top: -0.5px !important; height: 30px !important; font-size: 10px !important; min-width: 96% !important;}
@media (max-width: 768px){.mainbody .sright .atts_upl .form-group2 {width: 50% !important;}}
@media (max-width: 556px){.mainbody .sright .atts_upl .form-group2 {width: 100% !important;}}

/* dashbox */
.mainbody .dash_holder {display: flex; margin-bottom: 5px;}
.mainbody .dashbox {border-bottom: 1px solid #e2e6e9; background: #fff; height: 70px; border-radius: 3px; padding: 0; float: none; margin: 5px 0 10px 0; display: block; width: 19%; margin-right: 1%; float: left;}
.mainbody .dashbox:hover i {transform: rotate(30deg);}
.mainbody .dashbox .iconbox {padding:0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; margin: 0; float: none; display: inline-block; width: 37%;}
.mainbody .dashbox .iconbox i {font-size: 25px; line-height: 70px; transition: 0.4s all; color: #fff; font-weight: lighter; display: block; text-align: center;}
.mainbody .dashbox .bg-cyan {background-color: #00c0ef;}
.mainbody .dashbox .bg-red {background-color: #dd4b39;}
.mainbody .dashbox .bg-green {background-color: #00a65a;}
.mainbody .dashbox .bg-yellow {background-color: #f39c12;}
.mainbody .dashbox .bg-purple {background-color: #FF69B4;} 
.mainbody .dashbox .bg-acid {background-color: #B0BF1A;}
.mainbody .dashbox .bg-amber {background-color: #FF7E00;}
.mainbody .dashbox .bg-lilac {background-color: #9500B3;}
.mainbody .dashbox .bg-salle {background-color: #00802B;}
.mainbody .dashbox .txtbox {float: right; border-top-right-radius: 3px; border-bottom-right-radius: 3px; width: 63%; padding: 0 10px;}
.mainbody .dashbox .txtbox h4 {font-size: 13px; line-height: 18px; margin-top: 7px; margin-bottom: 0; letter-spacing: 0.5px;}
.mainbody .dashbox .txtbox p {font-size: 16px; padding: 0; margin: 0; line-height: 25.7167px; font-weight: bold;}
@media (max-width:768px){
.mainbody .dashbox .iconbox {width: 100%; border-bottom-left-radius: 0; border-top-right-radius: 3px;}
.mainbody .dashbox .iconbox i {line-height: 35px; font-size: 20px;}
.mainbody .dashbox .txtbox {width: 100%; border-top-right-radius: 0; border-bottom-left-radius: 3px; float: none; text-align: center;}
.mainbody .dashbox .txtbox h4 {font-size: 12px; line-height: 15px; margin-top: 0; display: inline;}
.mainbody .dashbox .txtbox h4 span {display: none;}
.mainbody .dashbox .txtbox p {font-size: 12px; padding: 0; margin: 0; line-height: 10px; font-weight: 300; display: inline}}
@media (max-width:556px){
.mainbody .dashbox .txtbox h4 {display: none}
.mainbody .dashbox .txtbox p {font-size: 20px; line-height: 25px; font-weight: 300; display: block}}

/* btnrows */
.mainbody .btnrows {margin: 15px 0 10px; text-align: left; text-transform: capitalize;}
.mainbody .btnrows button.btn {font-size: 13px; border-radius: 3px; text-decoration: none; padding: 2px 10px; min-width: 90px; margin-right: 10px; margin-bottom: 10px; display: inline-block; cursor: pointer; background-color: #fff; outline: none; text-transform: capitalize;}
.mainbody .btnrows button.btn i {margin-right: 5px;}
.mainbody .btnrows button.btn1 {border: 1px solid #009933; color: #fff; background: #009933;}
.mainbody .btnrows button.btn2 {border: 1px solid #00afef; color: #fff; background: #00afef;}
.mainbody .btnrows button.btn3 {border: 1px solid #191970; color: #fff; background:#191970;}
.mainbody .btnrows button.btn4 {border: 1px solid #009933; color: #fff; background:#009933;}
.mainbody .btnrows button.btn5 {border: 1px solid #ff4500; color: #fff; background: #ff4500;}
@media (max-width: 768px){.mainbody .btnrows h1 {margin-top: 15px;}}


/* mycard */
.mainbody .mycard {border: 1px solid #aaa; border-top: 3px solid #aaa; background: #fff; min-height: 100px; border-radius: 3px; padding: 0; height: auto; margin-top: 0; margin-bottom: 20px;}
.mainbody .mycard h3 {font-size:16px; border-bottom:1px solid #ccc; padding:15px 10px; font-weight: 900; text-transform: uppercase; margin: 0; color: #242424;}
.mainbody .mycard h3 span.text-danger {color: #a03c22; font-weight: bold;}
.mainbody .mycard h3 span.text-success {color: #093; font-weight: bold;}

.mainbody .mycard h3 > span.span {font-size: 12px; padding-left: 5px; color: #009933; font-weight: bold; padding-bottom: 10px;}
.mainbody .mycard h3 > span.success {font-size: 10px; color: #009933; font-weight: bold;}
.mainbody .mycard h3 > span.error {font-size: 10px; color: #a03c22; font-weight: bold;}
.mainbody .mycard h3 strong {color: #a03c22}
.mainbody .mycard h3 small {font-weight: bold; text-decoration: underline; color: #242424}
.mainbody .guide p {font-weight: normal !important;}
.mainbody .guide h5 {font-weight: bold;}
.mainbody .guide strong {color:#393185; font-weight: 900;}
.mainbody .pad10 {padding: 10px;}
.mainbody .pad10 .pad_form {border:1px solid #ccc; background:#f9f9f9; }
.mainbody .pad10 .pad_form > h3 {background:#5f5f5f;font-size: 15px;font-weight:bold; border-bottom:1px solid #f9f9f9;text-align:left;color:#fff; margin:0px; padding: 5px 15px; margin-bottom: 10px;}
.mainbody .pad10 .pad_form .row {padding: 0 15px; margin-bottom: 0px;}

.mainbody .pad10 #w10 {min-height: 450px;}
.mainbody .mycard img {margin: 10px auto 20px auto; max-height: 100%; max-width: 100%;}
.mainbody .mycard h4 {font-size: 17px; color: #999; text-align: center; margin: 40px auto;}
.mainbody .mycard p {font-size: 14px; color: #777; margin-bottom: 13px; line-height: 22px;}
.mainbody .mycard span {font-weight: bold; color: #555; text-transform: capitalize;}
.mainbody .mycard .btn {color: #fff; font-size: 14px; width: auto; height: auto; border-radius: 3px; line-height: normal; padding: 4px 10px; margin-top: 5px; margin-right: 5px; 
text-transform: capitalize; box-shadow: inset 0 3px 6px rgba(0,0,0,0.2);}
.mainbody .mycard .btn:focus {outline: none;}
.mainbody .mycard .add {background: #009933; color: #fff; border:1px solid #009933;}
.mainbody .mycard .add:hover {background: #08b46b; color: #fff; border:1px solid #08b46b;}
.mainbody .mycard .xadd {padding: 3px 10px; width: auto; margin: 10px; font-size: 10px; background: #0099cc; border-color: #0099cc;}
.mainbody .mycard .xadd:hover, .mainbody .mycard .xadd:focus {outline: none; background-color: #0099cc; border-color: #0099cc;}
.mainbody .mycard .xadd2 {margin-right: 0; margin-bottom: 0;}
.mainbody .mycard .xadd2 span {color: #fff;}
.mainbody .mycard .dataBtn {padding: 5px 10px; width: auto; margin: 10px 0; font-size: 11px; background: #0099cc; border-color: #0099cc; color:#fff !important;}
.mainbody .mycard .dataBtn:hover, .mainbody .mycard .dataBtn:focus {outline: none; background-color: #0099cc; border-color: #0099cc;}
.mainbody .mycard .suspend {background: #f39c12; color: #fff; border:1px solid #f39c12;}
.mainbody .mycard .suspend:hover {background: #e08e0b; color: #fff; border:1px solid #e08e0b;}
.mainbody .mycard .approve {background: #37a000; color: #fff; border:1px solid #37a000;}
.mainbody .mycard .approve:hover {background-color: forestgreen; color: #fff; border:1px solid forestgreen;}
.mainbody .mycard .edit {background: #2971ad; color: #fff; border:1px solid #2971ad;}
.mainbody .mycard .edit:hover {background: #3367d6; color: #fff; border:1px solid #3367d6;}
.mainbody .mycard .delete {background: #dd4b39; color: #fff; border:1px solid #dd4b39;}
.mainbody .mycard .delete:hover {background: #d73925; color: #fff; border:1px solid #d73925;}
.mainbody .mycard .view {background: #ff4500; color: #fff; border:1px solid #ff4500;}
.mainbody .mycard .view:hover {background: #ff4500; color: #fff; border:1px solid #ff4500;}
.mainbody .row1 {margin-top: 45px;}
.mainbody .mycard .myerror {color: #a03418; font-size: 12px; line-height: 18px; font-weight: bold;}
.mainbody .mycard .myinfo {color: #333; font-size: 13px; line-height: 18px; font-weight: bold;}

@media(max-width: 480px){
.mainbody .mycard h3 > span.span {display: block; padding:0; margin: -10px 0 0;}
.mainbody .mycard h3 > span {display: block; padding:0; margin: 10px 0 0;}
.mainbody .mycard h3 small {display: block;}
.mainbody .mycard .xadd {margin: 15px 10px;}}

.mainbody .newcard {background: #f5f5f5; margin-bottom: 20px; border: 1px solid #aaa; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow: 0 1px 1px rgba(0, 0, 0, .05);}
.mainbody .newcard-header { padding: 5px 15px; border-bottom: 3px solid #aaa; border-top-left-radius: 3px; border-top-right-radius: 3px;}
.mainbody .newcard-header .xadd {padding: 3px 10px; width: auto; margin: 10px; margin-right: 0; font-size: 10px; background: #093; border-color: #093;}
.mainbody .newcard-body {padding: 10px 15px;} 


/* settings box */
.mainbody .set_headbox {padding:10px 12px;border-bottom:1px solid #ccc;background:#323b44;color: #fff;}
.mainbody .set_headbox button {background-color: transparent; color: #fff; border:none}
.mainbody .set_box {padding: 10px; background-color: #fff; border: 1px solid #ccc; border-top: none; font-weight: 300;}
.mainbody .set_box a {font-size: 14px; color: #193295; font-weight: bold; text-transform: uppercase;}
.mainbody .set_box a span {font-weight: normal; color: #212529; text-transform: none;}
.mainbody .set_box a:hover {outline: none; text-decoration: none;}
.mainbody .set_box:last-child {margin-bottom: 20px !important;}
.mainbody .set_box form {float: right;}
.mainbody .set_box button.setbtn {border:1px solid #ccc; padding:0 5px;width:23px;height:23px;border-radius:50%;background:transparent; font-weight: 300; font-size: 13px; display:inline-block; margin: 0; transition: 0.4s all; color:#193295; text-align:center;}
.mainbody .set_box button.del:hover {background-color: #A03418; border-color: #A03418; color: #fff;}
.mainbody .set_box button.edit:hover {background-color: #193295; border-color: #193295; color: #fff;}
.mainbody .set_box button.current {background:transparent; color: #37a000;}
.mainbody .setbtn2 {transition:0.4s all;color: #193295;padding: 10px;background:#fff; text-align:left;border: 1px solid #ccc; border-top: none; font-weight: bold;display:block; width: 100%;margin-bottom: 0;}
.mainbody .setbtn2 span {font-weight: normal; color: #212529; text-transform: none;}
.mainbody .setbtn2:hover {background-color:#fefefe; outline: none; text-decoration: none;}
@media(max-width: 768px){.mainbody .set_headboxd {margin-top: 20px;}}

@media(max-width: 768px){.mainbody .set_headboxd {margin-top: 20px;}}

/* mymodal */
.modal {background: rgba(0,0,0,0.8); padding-top: 60px; border-radius: 0;}
.modal-header {background:#193295; color: #fff; text-transform: uppercase; font-weight: bold;}
.modal .close {color: #fff}
.modal-body h3 {background:#5f5f5f;font-size: 18px;font-weight:bold; border-bottom:1px solid #f9f9f9;text-align:center;color:#fff; margin-top:-1px; padding: 5px;}
.modal .add {background: #009933; color: #fff; border:1px solid #009933;}
.modal .btn {color: #fff; font-size: 14px; width: auto; width: 145px; height: auto; border-radius: 3px; line-height: normal; padding: 8px 12px; margin-top: 5px; margin-right: 5px; text-transform: capitalize;}
.modal .btn:focus {outline: none;}
.modal .form-control {box-shadow:inset 0 3px 3px rgba(0,0,0,0.1);}
.modal .form-control:focus {border: 1px solid #193295; box-shadow:inset 0 3px 6px rgba(0,0,0,0.1)}
.modal .add {background: #009933; color: #fff; border:1px solid #009933;}
.modal .add:hover {background: #08b46b; color: #fff; border:1px solid #08b46b;}
.modal .xadd {padding: 5px 10px; width: auto; margin: 10px; font-size: 11px; background: #0099cc; border-color: #0099cc; color:#fff;}
.modal .xadd:hover, .mainbody .mycard .xadd:focus {outline: none; background-color: #0099cc; border-color: #0099cc;}
.modal .suspend {background: #f39c12; color: #fff; border:1px solid #f39c12;}
.modal .suspend:hover {background: #e08e0b; color: #fff; border:1px solid #e08e0b;}
.modal .approve {background: #37a000; color: #fff; border:1px solid #37a000;}
.modal .approve:hover {background-color: forestgreen; color: #fff; border:1px solid forestgreen;}
.modal .edit {background: #2971ad; color: #fff; border:1px solid #2971ad;}
.modal .edit:hover {background: #3367d6; color: #fff; border:1px solid #3367d6;}
.modal .delete {background: #dd4b39; color: #fff; border:1px solid #dd4b39;}
.modal .delete:hover {background: #d73925; color: #fff; border:1px solid #d73925;}

/* forms */
.form-control {border:1px solid #ccc;background:#FFF;color:#495666;padding-left:10px;border-radius:3px;box-shadow:none;}
.form-control:active, .form-control:focus {border:1px solid #3c8dbc;outline:none; background-color: #fff;}
.form-control::placeholder, .form-control::-webkit-input-placeholder, .form-control::-moz-placeholder, .form-control:-moz-placeholder, .form-control::-ms-input-placeholder, .form-control:-ms-input-placeholder {color: #495057; font-weight: 900;}
form .help-block {font-size: 11px; font-weight: 300 !important;}
input.search {background-color: #fff !important;}
form input[type="date"] {width: 100% !important; padding: 0; padding-left: 5px;}
form input[type="hidden"] {display: none !important; visibility: hidden !important}
.checkbox label {font-size: 14px;}
select::-ms-expand {display: none;}
select {-webkit-appearance: none; -moz-appearance: none; background: #fff; appearance: none; outline: none;}
input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button {-webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0;}
input[type='number'] {-moz-appearance:textfield; -webkit-appearance: textfield;}
label span {font-weight: 300 !important; font-style: italic; color: #f00 !important;}
.inner-addon {position: relative; font-size: 13px; line-height: 19px;}
.inner-addon i {width: 25px; display: block;}
.inner-addon select {-webkit-appearance: show; -moz-appearance: show; appearance: show; outline: none; pointer-events: stroke; width: 45px; position: absolute; display: block; border-top-right-radius: 0; border-bottom-right-radius: 0;}
.left-addon select {left: 0px; margin-right: 0;}
.left-addon input {padding-left: 50px; border: 1px solid #b2b2b2;}
.btn-wrapper {position: relative; overflow: hidden; display: inline-block; width: 100%;}
.btnd {display: block; text-align: left; min-width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #e9ecef; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.btnd:focus, .btnd:hover {border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175, 233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);}
.btnd::-moz-placeholder {color: #999; opacity:1;}
.btnd:-ms-input-placeholder {color: #999;}
.btnd::-webkit-input-placeholder {color: #999;}
.btn-wrapper input[type='file'] {position: absolute; left: 0; top: 0; opacity: 0;}

/* tables */
.mainbody .mycard .table th {font-size: 15px; border-bottom: none; background: #5f5f5f; color: #fff; font-weight: bold;}
.mainbody .mycard .table td {font-size: 13px; font-weight: 400; line-height: 20px; text-transform: none; padding: 4px 10px;}
.mainbody .mycard .table .btn {font-size:12px; min-width: 40px; margin: 2px; margin-bottom: 5px; padding: 2px 7px; text-align: center;}
.mainbody .mycard .table .btn i {margin-right: 2px;}
.mainbody .mycard .table td a:focus, .mainbody .mycard .table td a:hover {outline: none !important;}
.mainbody .mycard .table td .link {color: #03aaf4; font-weight: bold;}
.mainbody .mycard .table td .link2 {color: #393185}
.mainbody .mycard .table td .link:hover {text-decoration: underline;}
.mainbody .mycard .table td .text:focus, .mainbody .mycard .table td .text:hover {text-decoration: underline !important;}
.mainbody .mycard .table td .pagination {margin: 4px auto;}
.mainbody .mycard .table td .pagination li {height: 23px;}
.mainbody .mycard .table td select {background: #fff; height: 25px !important; border:1px solid #ccc; border-radius:4px; font-weight: bold; font-size: 11px !important; padding: 2px 10px !important; margin-bottom: 5px; width: 140px !important; box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);}
.mainbody .mycard .table td select option {font-weight: bold; width: 140px !important;}

/* checkbox */
.mainbody .mycard .table .ccbox {display: block; position: relative; padding-left: 0; margin-bottom: 0; cursor: pointer; font-size: 9px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.mainbody .mycard .table .ccbox input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.mainbody .mycard .table .ccbox .checkmark {position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #eee;}
.mainbody .mycard .table .ccbox:hover input ~ .checkmark {background-color: #ccc;}
.mainbody .mycard .table .ccbox input:checked ~ .checkmark {background-color: #2196F3;}
.mainbody .mycard .table .ccbox .checkmark:after {content: ""; position: absolute; display: none;}
.mainbody .mycard .table .ccbox input:checked ~ .checkmark:after {display: block;}
.mainbody .mycard .table .ccbox .checkmark:after {left: 6px; top: 6px; width: 6px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.mainbody .empty_me {text-align: center; min-height: 100px; padding: 10px 20px;}
.mainbody .empty_me > span {font-weight: 300; text-transform: none; margin: 10px auto 10px; display: inline-block;}
.mainbody .empty_me > span strong {font-weight: 900;}
.mainbody .empty_me > h4 i {font-size: 90px; opacity: 0.8; color: #999; margin-top: -5px;}

.promotion option {line-height: 15px; background: #fff !important; font-size: 11px; color: #444; width: 80px !important}