@charset "utf-8";
/* CSS Document */
*{margin: 0; padding: 0;}
html, body{ background:  #f3f3f3; font-family: 'sf_ui_textregular', sans-serif !important; font-size:15px;}
ul, ol{ text-decoration: none; list-style: none;}
a, img, b, dt{ text-decoration: none; outline: none; font-weight: 400 !important;}
.mdl-layout__content{ overflow-y: scroll !important;}

.logo{ height: auto; width: 100%; padding: 10px; box-sizing: border-box; text-align: center; display: flex; flex-flow:column; align-items: center; justify-content: center;}
.logo > img{ display: block; max-height: 50px; max-width: 100%;}
.top-links{ height: auto; width: 100%; padding: 20px; box-sizing: border-box;}
.top-links > a{ height: 46px; width: 100%; background: #0c75ed; border-radius: 6px; text-align: center; font-size: 15px; 
	line-height: 46px; color: #fff; display: block; margin: 15px 0; box-shadow: 0 8px 24px rgba(12,117,237, .15); }
.top-links > a:hover{ background: #0b66ce;}
.top-links > a:last-child{ background: #edeef5; color: #000; box-shadow: none;}
.top-links > a:last-child:hover{ background: #c9cad6;}

.userandsession{ height: auto; width:auto; display: flex; flex-flow: row nowrap; align-items:center;}
.userandsession > li{ height: auto; width: auto; margin-left: 25px; display: flex; flex-flow: row nowrap; align-items: center; position: relative;}
.userandsession > li > label{ height: auto; width: auto; font-size:1rem; color: #474747; display: inline-block;}
.userandsession > li > .dropdown { height: auto; width: auto; color: #0c75ed; font-size:1rem;}
.userandsession > li > .dropdown .nice-select{ height: 40px !important; border: none !important; margin: 0; padding-left:10px;}
.userandsession > li > .dropdown > select{ height:auto; width: auto; border: none; background: url(../icons/arrow_drop_down.svg) no-repeat right center; padding: 5px 25px 5px 5px; font-size:1rem; color: #0c75ed; appearance:none; -moz-appearance:none; -ms-appearance:none; 
	-webkit-appearance:none; -o-appearance:none;}
.userandsession > li > .dropdown > select option{ color: #474747; line-height: 36px;}
.userandsession > li > span{ height: 36px; width: 36px; border-radius: 50%; display: inline-block; background: #eee; overflow: hidden; margin-right: 10px; box-shadow: 0 8px 16px rgba(0,0,0,.15); border: 2px solid #fff; flex-shrink: 0;}
.userandsession > li > span > img{ display: block; width: 100%; object-fit: cover;}
.userandsession > li > b{ display: inline-block; text-align: left; font-size:1rem; color: #474747; margin-right: 10px;}
.userandsession > li > a{ height: auto; width: auto; display: inline-flex; color: #474747; font-size:1rem; flex-flow: row nowrap; align-items:center;}
.userandsession > li > a > span{ height: 24px; width: 24px; border-radius: 50%; display: inline-block; margin-right: 10px; background: url(../icons/giftbox.svg) no-repeat center center #ff6d4a; background-size: 12px; animation: animate 3s linear infinite;}
@keyframes animate
{
	0%{box-shadow: 0 0 0 0 rgba(255, 109, 74, .7), 0 0 0 0 rgba(255, 109, 74, .7);}
	25%{box-shadow: 0 0 0 15px rgba(255, 109, 74, 0), 0 0 0 0 rgba(255, 109, 74, .7);}
	50%{box-shadow: 0 0 0 15px rgba(255, 109, 74, 0), 0 0 0 10px rgba(255, 109, 74, 0);}
	100%{box-shadow: 0 0 0 0 rgba(255, 109, 74, 0), 0 0 0 0 rgba(255, 109, 74, 0);}
}

.mdl-navigation{ height: calc(100vh - 250px); overflow-y: auto; scrollbar-width:thin;}
.mdl-navigation::-webkit-scrollbar{ width: 6px;}
.mdl-navigation::-webkit-scrollbar-track { background: #f8f8f8;} 
.mdl-navigation::-webkit-scrollbar-thumb { background-color: #eee; outline: 1px solid #eee;}
.mdl-navigation > a{ display: flex !important; flex-flow: row nowrap; align-items: center; border-left: 3px solid #fff; box-sizing: border-box;}
.mdl-navigation > a:hover, .mdl-navigation > a.active{ color: #004dff !important; border-color: #004dff; background: #fff !important;}
.mdl-navigation > a > i{ display: inline-block; margin-right: 20px;}
.mdl-navigation > a > i > img{ display: block; width: 20px; height: 20px;}
.mdl-navigation > a:hover .feather{color:#004dff;}
.mdl-navigation > a:hover .st0{fill:#004dff;}
.mdl-navigation > a.active .feather{color:#004dff;}
.mdl-navigation > a.active .st0{fill:#004dff;}
.feather{ color:#b7b7b7;}
.st0{ fill: #b7b7b7;}

.datetime{ height: auto; width: auto; color: #000; font-size:1rem;}
.datetime > span{ margin-right: 5px; color: #004dff;}

.page-content{ box-sizing: border-box; position: relative;}

.main_heading{ height: auto; width: 100%;}
.main_heading > ul{ height: auto; width: 100%; display: grid; grid-gap:.8rem; grid-template-columns:3rem auto; align-items: center;}
.main_heading > ul > li{ height: auto; width: 100%;}
.main_heading > ul > li > small{ display: flex; align-items: center;  justify-content: center; height: 3rem; width: 3rem; border-radius: 50%; background: #3ab870;}
.main_heading > ul > li > small > img{ display: block; width: 1.5rem;}
.main_heading > ul > li > h1{ text-align: left; font: 400 1.5rem 'sf_ui_textsemibold', sans-serif; color: #202020; letter-spacing: -.25px; margin: 0;}

/******** Select Employee *************/

.select_emp{ background: #ffffff; padding: 32px; width: 100%; box-sizing: border-box; margin-top: 24px; border-radius: 4px;}
.select_emp > h1{ text-align: left; font: 400 1.25rem 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.25px; margin: 0;}
.select_emp > div > .employee-search{ height: auto; width: 100%; display: grid; grid-gap:16px; grid-template-columns:16% 16% 16% 8%; margin-top: 24px; align-items:flex-start;}
.select_emp > div > .employee-search > li{ height: auto; width: 100%;}
.select_emp > div > .employee-search > li > label{ text-align: left; display: block; font-size:1rem; color: #878787; margin:0 0 6px 0;}
.select_emp > div > .employee-search > li > select{ width: 100%; display: block; height:36px; box-sizing:border-box; padding:2px 4px; border:1px solid #d0d0d0; border-radius:4px;}
.select_emp > div > .employee-search > li > input[type=text]{ width: 100%; display: block; height:36px; box-sizing:border-box; padding:2px 4px; border:1px solid #d0d0d0; border-radius:4px;}
.select_emp > div > .employee-search > li > input[type=file]{ width: 100%; display: block; height:36px; box-sizing:border-box; padding:4px; border:1px solid #d0d0d0; border-radius:4px;}
.select_emp > div > .employee-search > li > .erromsg{ height: 18px; width: 100%; display: inline-block; text-align: left; background: url(../icons/error_msg.svg) no-repeat left center; background-size: 18px; padding-left: 26px; font-size:1rem; color:#f00; margin-top: 4px;}
.select_emp > div > .employee-search > li > input[type=submit]{ display: block; height: 40px; width: 100%; border-radius: 4px; margin:23px 0 0 0;
	font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #fff; text-align: center; background: #0c75ed; border: none; cursor: pointer; appearance:none; -moz-appearance:none; -o-appearance:none; -ms-appearance:none; -webkit-appearance:none;}
.select_emp > div > .employee-search > li > input[type=submit]:hover{ background: #0b66ce; box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.select_emp > div > .employee_search_results{ height: auto; width: 100%; margin-top: 24px;}
.select_emp > div > .employee_search_results > .message1{ height: auto; width: 100%; margin-top: 40px;}
.select_emp > div > .employee_search_results > .message1 > label{ display: block; width: 100%; text-align: left; font: 400 1.25rem 'sf_ui_textmedium', sans-serif; color: #202020; letter-spacing: -.25px;}
.select_emp > div > .employee_search_results > .message1 > textarea{ display: block; width: 100%; height: 96px; padding: 16px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; letter-spacing: -.25px; margin-top: 8px;}
.select_emp > div > .employee_search_results > .message1 > .textcount{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; margin-top: 8px;}
.select_emp > div > .employee_search_results > .message1 > .textcount > label{ display: inline-block; color: #878787;}
.select_emp > div > .employee_search_results > .message1 > .textcount > .numbersofChart{ display: inline-block; height: 32px; width: 48px; border-radius: 4px; border: 1px solid #ddd; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; margin-right: 8px; padding: 8px; box-sizing: border-box; text-align: center;}

.select_emp > div > .employee_search_results > .employee_table{ height: auto; width: 100%;}
.select_emp > div > .employee_search_results > .employee_table > div > table{ height: auto; width: 100%; border-collapse: collapse; border:none;}
.select_emp > div > .employee_search_results > .employee_table > div > table tbody{ height: auto; width: 100%; display:flex; flex-flow:row wrap; align-items:center; }
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr{ width:24%; height: auto; margin:4px;}
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr th{height: 72px; width:100%; position: relative; display: flex; flex-flow:row nowrap; align-items:center; justify-content:center; border:1px solid #ddd; border-radius:4px;}
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr th > input[type="checkbox"]{	position: absolute; height: 100%; width: 100%; display: block; cursor: pointer; opacity: 0; z-index:1;}
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr th > label{ display:block; width:100%; font:400 1rem 'sf_ui_textmedium', sans-serif; color:#000; background:url(../icons/unchecked.svg) no-repeat left 16px center; background-size:24px;}
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr th > input[type="checkbox"]:checked ~ label{ background:url(../icons/checkbox.svg) no-repeat left 16px center; background-size:24px; }
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr td{ height: auto; width:100%; position: relative; display: block;}
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr td > input[type="checkbox"]{	position: absolute; height: 100%; width: 100%; display: block; cursor: pointer; opacity: 0; z-index:1;}
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr td > input[type="checkbox"]:checked ~ .employee{ border-color:#3ab870;} 
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr td > input[type="checkbox"]:checked ~ .employee > small{background-color: #3ab870;}
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee { border: 1px solid #e4e4e4; box-sizing: border-box; position:relative; border-radius: 4px; background: #fff; padding:8px 40px 8px 8px !important; }
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > small{ display: block; height: 18px; width: 18px; border-radius: 50%; position: absolute; top: 8px; right: 8px; background:url(../icons/check.svg) no-repeat center #d0d0d0; background-size: 14px;}
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > ul{ height: auto; width: 100%; display:flex; flex-flow:row nowrap; padding:0px; box-sizing:border-box;}
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > ul > li{ height:auto; width: 48px; margin:0 !important; overflow:hidden;}
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > ul > li:first-child{ flex-shrink:0;}
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > ul > li:last-child{ height:auto; width:auto; padding-left:8px; box-sizing:border-box;}
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > ul > li > img{ display: block; width: 100%; max-height: 51px; overflow: hidden; object-fit: cover; border-radius: 4px;}
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > ul > li > h2{ text-align: left; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #000; margin:0 0 4px 0; letter-spacing: -.02px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > ul > li > p{ text-align: left; font: 400 .87rem/.875rem 'sf_ui_textregular', sans-serif; color: #575757; margin: 0 0 3px 0; }
.select_emp > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > ul > li > p > b{ text-align: left; font: 400 .87rem/.875rem 'sf_ui_textmedium', sans-serif; color: #000; margin: 0;}

.select_emp > div > .employee_search_results > .message1 > .sendbuttns{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; margin-top: 16px;}
.select_emp > div > .employee_search_results > .message1 > .sendbuttns > input{ display: block; width: 216px; height: 56px; border: 2px solid #3ab870; box-sizing: border-box; background: #3ab870; margin: 0 8px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #fff; border-radius: 4px; cursor: pointer;}
.select_emp > div > .employee_search_results > .message1 > .sendbuttns > input:hover{ box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.select_emp > div > .employee_search_results > .message1 > .sendbuttns > input.push{ background: #fff !important; color: #3ab870 !important;}
.select_emp > div > .employee_search_results > .message1 > .sendbuttns > input.push:hover{ background: #3ab870 !important; color: #fff !important;}

.subHeading{ display: grid; grid-template-columns:50% 50%; align-items: center;}
.subHeading > li{ width: 100%;}
.subHeading > li > h1{ text-align: left; font: 400 1.5rem 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.25px; margin: 0;}
.subHeading > li:last-child{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end;}
.subHeading > li > a{ border-radius: 4px; display: inline-block; height: 32px; padding: 0 24px 0 36px; box-sizing: border-box; background: #eef5fc; font: 400 1rem/30px 'sf_ui_textregular', sans-serif; color: #0c75ed; margin-left: 8px; }
.subHeading > li > a:hover{ background: #d8e4f2;}

.subHeading > li > a[name="add"]{background: url(../icons/plus.svg) no-repeat left 10px center #eef5fc; background-size: 18px; color: #0c75ed;}
.subHeading > li > a[name="add"]:hover{ background: url(../icons/plus-white.svg) no-repeat left 10px center #0c75ed; background-size: 18px; color: #fff;}
.subHeading > li > a[name="add"].active{ background: url(../icons/plus-white.svg) no-repeat left 10px center #0c75ed; background-size: 18px; color: #fff;}
.subHeading > li > a[name="manage"]{background: url(../icons/manage.svg) no-repeat left 10px center #eef5fc; background-size: 16px; color: #0c75ed;}
.subHeading > li > a[name="manage"]:hover{ background: url(../icons/manage-white.svg) no-repeat left 10px center #0c75ed; background-size: 16px; color: #fff;}
.subHeading > li > a[name="manage"].active{ background: url(../icons/manage-white.svg) no-repeat left 10px center #0c75ed; background-size: 16px; color: #fff;}
.subHeading > li > a[name="class"]{background: url(../icons/grid.svg) no-repeat left 10px center #eef5fc; background-size: 16px; color: #0c75ed;}
.subHeading > li > a[name="class"]:hover{ background: url(../icons/grid-white.svg) no-repeat left 10px center #0c75ed; background-size: 16px; color: #fff;}
.subHeading > li > a[name="class"].active{ background: url(../icons/grid-white.svg) no-repeat left 10px center #0c75ed; background-size: 16px; color: #fff;}
.subHeading > li > a[name="report"]{background: url(../icons/report.svg) no-repeat left 10px center #eef5fc; background-size: 18px; color: #0c75ed;}
.subHeading > li > a[name="report"]:hover{ background: url(../icons/report-white.svg) no-repeat left 10px center #0c75ed; background-size: 18px; color: #fff;}
.subHeading > li > a[name="report"].active{ background: url(../icons/report-white.svg) no-repeat left 10px center #0c75ed; background-size: 18px; color: #fff;}
.subHeading > li > a[name="upload"]{background: url(../icons/upload-black.svg) no-repeat left 12px center #eef5fc; background-size: 14px; color: #0c75ed;}
.subHeading > li > a[name="upload"]:hover{ background: url(../icons/upload.svg) no-repeat left 12px center #0c75ed; background-size: 14px; color: #fff;}
.subHeading > li > a[name="upload"].active{ background: url(../icons/upload.svg) no-repeat left 12px center #0c75ed; background-size: 14px; color: #fff;}
.subHeading > li > a[name="view"]{background: url(../icons/visibility.svg) no-repeat left 12px center #eef5fc; background-size: 18px; color: #0c75ed;}
.subHeading > li > a[name="view"]:hover{ background: url(../icons/visibility-white.svg) no-repeat left 12px center #0c75ed; background-size: 18px; color: #fff;}
.subHeading > li > a[name="view"].active{ background: url(../icons/visibility-white.svg) no-repeat left 12px center #0c75ed; background-size: 18px; color: #fff;}

/******** Select Class *************/
.select_class{ background: #ffffff; padding: 32px; width: 100%; box-sizing: border-box; margin-top: 24px; border-radius: 4px;}
.select_class > h1{ text-align: left; font: 400 18px 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.25px; margin: 0;}
.select_class > .class_table{ height: auto; width: 100%; margin-top: 48px;}
.select_class > .class_table > div > table{ height: auto; width: 100%; border-collapse: collapse; border:none;}
.select_class > .class_table > div > table tbody{ height: auto; width: 100%; display: grid; grid-gap:16px; grid-template-columns:repeat(6, 1fr); background: #fff;}
.select_class > .class_table > div > table tbody tr{ width: 100%; height: auto;}
.select_class > .class_table > div > table tbody tr td{ height: auto; width: 100%; position: relative; display: block;}
.select_class > .class_table > div > table tbody tr td > input[type="checkbox"]{	position: absolute; height: 100%; width: 100%; display: block; cursor: pointer; opacity: 0; z-index:1;}
.select_class > .class_table > div > table tbody tr td > input[type="checkbox"]:checked ~ .sel_class{ border-color:#3ab870; background: #f3fff8;} 
.select_class > .class_table > div > table tbody tr td > input[type="checkbox"]:checked ~ .sel_class > small{
	background-color: #3ab870;}
.select_class > .class_table > div > table tbody tr td > .sel_class { border: 1px solid #e4e4e4; padding:16px; box-sizing: border-box; position:relative; border-radius: 4px; background: #f9f9f9; }
.select_class > .class_table > div > table tbody tr td > .sel_class > small{ display: block; height: 24px; width: 24px; border-radius: 50%; position: absolute; top: 14px; right: 10px; background:url(../icons/check.svg) no-repeat center #d0d0d0; background-size: 18px;}
.select_class > .class_table > div > table tbody tr td > .sel_class > p{ text-align: left; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #000; margin: 0;}

.select_class > .message1{ height: auto; width: 100%; margin-top: 40px;}
.select_class > .message1 > label{ display: block; width: 100%; text-align: left; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; letter-spacing: -.25px;}
.select_class > .message1 > input{width: 100%; display: block; margin-top: 8px; height: 40px; border-radius: 4px; font: 400 1em 'sf_ui_textmedium', sans-serif; color: #202020; padding: 8px; border: 1px solid #ddd; box-sizing: border-box;}
.select_class > .message1 > textarea{ display: block; width: 100%; height: 96px; padding: 16px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; letter-spacing: -.25px; margin-top: 8px;}
.select_class > .message1 > .textcount{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; margin-top: 8px;}
.select_class > .message1 > .textcount > label{ display: inline-block; color: #878787;}
.select_class > .message1 > .textcount > .numbersofChart{ display: inline-block; height: 32px; width: 48px; border-radius: 4px; border: 1px solid #ddd; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; margin-right: 8px; padding: 8px; box-sizing: border-box; text-align: center;}
.select_class > .message1 > .sendbuttns{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; margin-top: 16px;}
.select_class > .message1 > .sendbuttns > input{ display: block; width: 216px; height: 56px; border: 2px solid #3ab870; box-sizing: border-box; background: #3ab870; margin: 0 8px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #fff; border-radius: 4px; cursor: pointer;}
.select_class > .message1 > .sendbuttns > input:hover{ box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.select_class > .message1 > .sendbuttns > input.push{ background: #fff !important; color: #3ab870 !important;}
.select_class > .message1 > .sendbuttns > input.push:hover{ background: #3ab870 !important; color: #fff !important;}

/******** Select Class *************/
.send_to_many{ background: #ffffff; padding: 32px; width: 100%; box-sizing: border-box; margin-top: 24px; border-radius: 4px;}
.send_to_many > h1{ text-align: left; font: 400 1.5rem 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.25px; margin: 0;}
.send_to_many  .send-search{ height: auto; width: 100%; display: grid; grid-gap:16px; grid-template-columns:16% 16% 16% 8%; margin: 24px 0; align-items:flex-end;}
.send_to_many  .send-search > li{ height: auto; width: 100%;}
.send_to_many  .send-search > li > label{ text-align: left; display: block; font-size:1rem; color: #878787;}
.send_to_many  .send-search > li > select{ width: 100%; display: block; margin-top: 8px;}
.send_to_many  .send-search > li > input[type=button]{ display: block; height: 40px; width: 100%; border-radius: 4px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #fff; text-align: center; background: #0c75ed; border: none; cursor: pointer; appearance:none; -moz-appearance:none; -o-appearance:none; -ms-appearance:none; -webkit-appearance:none; margin-bottom: 24px;}
.send_to_many  .send-search > li > input[type=button]:hover{ background: #0b66ce; box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.send_to_many  .message{ height: auto; width: 100%; margin-top: 24px;}
.send_to_many  .send-search > li > .erromsg{ height: 18px; width: 100%; display: inline-block; text-align: left; background: url(../icons/error_msg.svg) no-repeat left center; background-size: 18px; padding-left: 26px; font: 400 .875rem/18px 'sf_ui_textregular', sans-serif; color:#f00; margin-top: 4px;}
.send_to_many  .send-search > li > .checkbox{   margin-bottom: 8px !important;  }
.send_to_many  .send-search > li > .checkbox span{font: 400 14px/22px 'sf_ui_textregular', sans-serif !important; color: #575757 !important;}
.send_to_many  .message1 > label{ display: block; width: 100%; text-align: left; font: 400 1.5rem 'sf_ui_textmedium', sans-serif; color: #202020; letter-spacing: -.25px;}
.send_to_many  .message1 > textarea{ display: block; width: 100%; height: 96px; padding: 16px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; letter-spacing: -.25px; margin-top: 8px;}
.send_to_many  .message1 > .erromsg{ height: 18px; width: 100%; display: inline-block; text-align: left; background: url(../icons/error_msg.svg) no-repeat left center; background-size: 18px; padding-left: 26px; font: 400 .875rem/18px 'sf_ui_textregular', sans-serif; color:#f00; margin-top: 10px;float:left;}
.send_to_many  .message1 > .textcount{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; margin-top: 8px;}
.send_to_many  .message1 > .textcount > label{ display: inline-block; color: #878787; margin-left:8px;}
.send_to_many  .message1 > .textcount > input{ display: inline-block; height: 32px; width: 48px; border-radius: 4px; border: 1px solid #ddd; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; margin-right: 8px; padding: 8px; box-sizing: border-box; text-align: center;}
.send_to_many  .message1 > .sendbuttns{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; margin-top: 16px;}
.send_to_many  .message1 > .sendbuttns > input{ display: block; width: 216px; height: 56px; border: 2px solid #3ab870; box-sizing: border-box; background: #3ab870; margin: 0 8px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #fff; border-radius: 4px; cursor: pointer;}
.send_to_many  .message1 > .sendbuttns > input:hover{ box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.send_to_many  .message1 > .sendbuttns > input.push{ background: #fff !important; color: #3ab870 !important;}
.send_to_many  .message1 > .sendbuttns > input.push:hover{ background: #3ab870 !important; color: #fff !important;}

/*************** Communication Dashboard ***************/
.communication_dash{ height: auto; width: 100%; display:grid; grid-template-columns:320px auto; background: #fff; margin-top:1.5em; border-radius: 4px;}
.communication_dash > .comm_links{ height: auto; width: 100%;}
.communication_dash > .comm_links > a{ height: 4rem; width: 100%; text-align: left; font: 400 1rem/4rem 'sf_ui_textregular', sans-serif; color: #757575; letter-spacing: -.1px; padding: 0 24px; box-sizing: border-box; border-bottom: 1px solid #e6e6e6; display: flex; flex-flow: row nowrap; align-items: center;}
.communication_dash > .comm_links > a > small{ display: block; width: 24px; margin-right: 16px;}
.communication_dash > .comm_links > a > small .st0{ fill:#808080;}
.communication_dash > .comm_links > a:hover > small .st0{ fill:#004dff;}
.communication_dash > .comm_links > a.active > small .st0{ fill:#004dff;}
.communication_dash > .comm_links > a:hover{ background-color: #f4f7ff; color: #004dff;}
.communication_dash > .comm_links > a.active{ background-color: #f4f7ff; color: #004dff;}
.communication_dash  .chatsandnotifications{ height: auto; width: 100%; border-left: 1px solid #e6e6e6; padding:1em; box-sizing: border-box;}
.communication_dash  .chatsandnotifications  .heading1{ height: auto; width: 100%; display: grid; grid-template-columns:auto 250px; align-items: center;}
.communication_dash  .chatsandnotifications  .heading1 > li{ height: auto; width: 100%;}
.communication_dash  .chatsandnotifications  .heading1 > li > h1{ text-align: left; font: 400 1.25rem 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.25px; margin: 0;}
.communication_dash  .chatsandnotifications  .heading1 > li > .period{ height: auto; width: 100%; display: flex; flex-flow: row nowrap;
	align-items: center; justify-content: flex-end;}
.communication_dash  .chatsandnotifications  .heading1 > li > .period > label{ display: block; text-align: left; font-size:1rem; color: #575757; margin-right: 16px;}
.communication_dash  .chatsandnotifications  .heading1 > li > .period > .pp{ height: 32px !important; width: 120px !important; margin: 0 !important; line-height: 32px !important;}
.communication_dash  .chatsandnotifications  .messages_n_announcements{ height: auto; width: 100%; margin-top: 1em; display: grid; grid-gap:1em; grid-template-columns:repeat(2, 1fr);} 
.communication_dash  .chatsandnotifications .messages_n_announcements > li{ height: auto; width: 100%; padding: 1em; box-sizing: border-box; border: 1px solid #e2e2e2; border-radius: 4px; text-align:left;}
.communication_dash  .chatsandnotifications  .messages_n_announcements > li > small{display: inline-block; font: 400 .8rem/23px 'sf_ui_textsemibold', sans-serif; padding: 0 10px; background: #ddd; color: #000; text-transform: uppercase; border-radius: 50px;}
.communication_dash  .chatsandnotifications  .messages_n_announcements > li > small.student{ background: #e5fff0 !important; color:#3ab870 !important;}
.communication_dash  .chatsandnotifications  .messages_n_announcements > li > small.staff{ background: #ffe8e8 !important; color:#f00 !important;}
.communication_dash  .chatsandnotifications  .messages_n_announcements > li > h1{ text-align: left; font: 400 1.12rem 'sf_ui_textmedium', sans-serif; color:#000; margin:24px 0;}
.communication_dash  .chatsandnotifications  .messages_n_announcements > li > dl{ height: auto; width: 100%; display: grid; grid-template-columns:repeat(2, 1fr); padding-top: 16px; border-top: 1px solid #e2e2e2;}
.communication_dash  .chatsandnotifications  .messages_n_announcements > li > dl > dt{ display:flex; flex-flow: row nowrap; align-items: center;}
.communication_dash  .chatsandnotifications  .messages_n_announcements > li > dl > dt:last-child{ justify-content: flex-end; font-size:.9rem; color: #878787;}
.communication_dash  .chatsandnotifications  .messages_n_announcements > li > dl > dt > small{height: 32px; width: 32px; display: block; border-radius: 50%; overflow: hidden; margin-right: 16px; flex-shrink: 0; }
.communication_dash  .chatsandnotifications  .messages_n_announcements > li > dl > dt > small > img{ display: block; height: 100%; width: 100%;
	object-fit: cover;}
.communication_dash  .chatsandnotifications  .messages_n_announcements > li > dl > dt > b{ display: inline-block; text-align: left; font-size:.925rem; color: #575757;}
.communication_dash  .chatsandnotifications  .messages_n_announcements > li > dl > dt > span{ display: inline; color: #222; margin-left: 4px;}

/******** Send SMS Box *************/
.sendBox{ background: #ffffff; padding: 32px; width: 100%; box-sizing: border-box; margin-top: 24px; border-radius: 4px;}
.sendBox > h1{ text-align: left; font: 400 1.5rem 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.25px; margin: 0;}
.sendBox > .searchSMS{ height: auto; width: 100%; display: grid; grid-gap:16px; grid-template-columns:15% 12% 14% 14% auto 140px; margin-top: 24px; align-items:flex-end;}
.sendBox > .searchSMS > li{ height: auto; width: 100%;}
.sendBox > .searchSMS > li > label{ text-align: left; display: block; font-size:1rem; color: #878787;}
.sendBox > .searchSMS > li > select{ width: 100%; display: block; margin-top: 8px;}
.sendBox > .searchSMS > li > input[type=text]{ width: 100%; display: block; margin-top: 8px; height: 40px; border-radius: 4px; font: 400 1em 'sf_ui_textmedium', sans-serif; color: #202020; padding: 8px; border: 1px solid #ddd; box-sizing: border-box;}
.sendBox > .searchSMS > li > .senddate{ background: url(../icons/calendar.svg) no-repeat 96% center #fff !important; background-size: 20px !important; padding-right: 32px !important;}
.sendBox > .searchSMS > li > input[type=submit]{ display: block; height: 40px; width: 100%; border-radius: 4px; font: 400 1em 'sf_ui_textmedium', sans-serif; color: #fff; text-align: center; background: #0c75ed; border: none; cursor: pointer; appearance:none; -moz-appearance:none; -o-appearance:none; -ms-appearance:none; -webkit-appearance:none;}
.sendBox > .searchSMS > li > input[type=submit]:hover{ background: #0b66ce; box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.sendBox > .sendedSMS{ height: auto; width: 100%; margin-top: 40px; overflow-x: auto;}
.sendBox > .sendedSMS > h2{ text-align: left; font: 400 1.5em 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.25px; margin: 0;}
.sendBox > .sendedSMS > div > table{ height: auto; width: 100%; border-collapse: collapse; margin-top: 24px;}
.sendBox > .sendedSMS > div > table th{ height: auto; width:auto; padding: 8px; text-align: left; font-weight: 400; font-size:1rem; color: #575757; border: 1px solid #ddd; background: #eee;}
.sendBox > .sendedSMS > div > table th:first-child{ text-align: center;}
.sendBox > .sendedSMS > div > table td{ height: auto; width:auto; padding: 8px; text-align: left; font-size:1rem; color: #575757; border: 1px solid #ddd;}
.sendBox > .sendedSMS > div > table td:first-child{ text-align: center;}
.sendBox > .sendedSMS > div > table td > .viewmembers{ height:32px; width: auto; padding: 0 12px 0 40px; border-radius: 4px; border:none; background:url(../icons/view.svg) no-repeat 12px center #ecf4ff; background-size:18px; font: 400 14px/32px 'sf_ui_textregular', sans-serif; color: #004dff; display: inline-block;}
.sendBox > .sendedSMS > div > table td > .viewmembers:hover{ background-color:#d3e5ff;}
.sendBox > .sendedSMS > div > table td > .actions{ display:flex; flex-flow: row nowrap; align-items: center;}
.sendBox > .sendedSMS > div > table td > .actions > .editmembers{ height:32px; width: auto; padding: 0 12px 0 40px; border-radius: 4px; border:none; background:url(../icons/edit-3.svg) no-repeat 12px center #297af3; background-size:18px; font: 400 14px/32px 'sf_ui_textregular', sans-serif; color: #fff; display: inline-block;}
.sendBox > .sendedSMS > div > table td > .actions > .editmembers:hover{ background-color:#1c62cc;}
.sendBox > .sendedSMS > div > table td > .actions > .deletemembers{ height:32px; width: auto; padding: 0 12px 0 40px; border-radius: 4px; border:none; background:url(../icons/trash-2.svg) no-repeat 12px center #e03940; background-size:18px; font: 400 14px/32px 'sf_ui_textregular', sans-serif; color: #fff; display: inline-block; margin:0 6px;}
.sendBox > .sendedSMS > div > table td > .actions > .deletemembers:hover{ background-color:#c82e35;}
.sendBox > .sendedSMS > div > table td > .actions > .sendSMS{ height:32px; width: auto; padding: 0 12px 0 40px; border-radius: 4px; border:none; background:url(../icons/message-circle.svg) no-repeat 12px center #22c26a; background-size:18px; font: 400 14px/32px 'sf_ui_textregular', sans-serif; color: #fff; display: inline-block;}
.sendBox > .sendedSMS > div > table td > .actions > .sendSMS:hover{ background-color:#179d53;}

.smspopup{ height:auto; max-height:350px; background: white; width: 90%; overflow: hidden; max-width: 560px; border-radius: 6px; box-sizing: border-box; position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 9999;}
.smspopup > h1{ margin: 0; text-align: left; font:400 1.5rem 'sf_ui_textmedium', sans-serif; color:#000; padding:24px; border-bottom: 1px solid #eee;}
.smspopup > .groupmembers{ height:275px; overflow-y: auto; padding: 24px; box-sizing: border-box; scrollbar-width:thin;}
.smspopup > .groupmembers::-webkit-scrollbar{ width: 6px;}
.smspopup > .groupmembers::-webkit-scrollbar-track { background: #f8f8f8;} 
.smspopup > .groupmembers::-webkit-scrollbar-thumb { background-color: #eee; outline: 1px solid #eee;}
.smspopup > .groupmembers > .groupmembersinner{  display:grid; grid-gap:8px; grid-template-columns:repeat(2, 1fr);}
.smspopup > .groupmembers > .groupmembersinner  > a{ display: inline-flex; flex-flow: row nowrap; align-items: center; border-radius: 4px; border: 1px solid #ddd; padding: 2px 16px 2px 2px; margin: 0 8px 8px 0;}
.smspopup > .groupmembers > .groupmembersinner  > a:hover{ background: #fafaff;}
.smspopup > .groupmembers > .groupmembersinner  > a > small{ display: block; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; margin-right: 8px;}
.smspopup > .groupmembers > .groupmembersinner  > a > small > img{ display: block; height: 100%; width: 100%; object-fit: cover;}
.smspopup > .groupmembers > .groupmembersinner  > a > abbr{ display: inline;}
.smspopup > .groupmembers > .groupmembersinner  > a > abbr > b{ display: inline-block;  font: 400 1rem 'sf_ui_textregular', sans-serif; color: #272727; text-align: left;}
.smspopup > .groupmembers > .groupmembersinner  > a > abbr > p{ text-align: left; font: 400 .925rem 'sf_ui_textregular', sans-serif; color: #878787; margin:0;}
.smspopup > input[type=submit]{ display: block; height: 24px; width: 24px; position: absolute; top: 24px; right: 24px; background: url(../icons/x-square.svg) no-repeat center; background-size: 24px; border: none; cursor: pointer; opacity: .5;}
.smspopup > input[type=submit]:hover{ opacity: .9;}
.smspopupbg{ height: 100%; width: 100%; background: rgba(0,0,0,.2); position: fixed; top: 0;}


/******** Add Group *************/

.addGroup{ background: #ffffff; padding: 32px; width: 100%; box-sizing: border-box; margin-top: 24px; border-radius: 4px;}
.addGroup > h1{ text-align: left; font: 400 1.5rem 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.25px; margin: 0;}
.addGroup > .searchGroup{height: auto; width: 100%; display: grid; grid-gap:16px; grid-template-columns:15% 15% 20% 140px; margin-top: 24px; align-items:flex-end;}
.addGroup > .searchGroup > li{ height: auto; width: 100%;}
.addGroup > .searchGroup > li > label{ text-align: left; display: block; font-size:1rem; color: #878787;}
.addGroup > .searchGroup > li > select{ width: 100%; display: block; margin-top: 8px;}
.addGroup > .searchGroup > li > input[type=text]{ width: 100%; display: block; margin-top: 8px; height: 40px; border-radius: 4px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; padding: 8px; border: 1px solid #ddd; box-sizing: border-box;}
.addGroup > .searchGroup > li > input[type=submit]{ display: block; height: 40px; width: 100%; border-radius: 4px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #fff; text-align: center; background: #0c75ed; border: none; cursor: pointer; appearance:none; -moz-appearance:none; -o-appearance:none; -ms-appearance:none; -webkit-appearance:none;}
.addGroup > .searchGroup > li > input[type=submit]:hover{ background: #0b66ce; box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.addGroup > div > .addStudents{ height: auto; width: 100%; margin-top: 40px;}
.addGroup > div > .addStudents > ul{height: auto; width: 100%; display: grid; grid-gap:32px; grid-template-columns:repeat(2, 1fr);}
.addGroup > div > .addStudents > ul > li{ height: auto; width: 100%;}
.addGroup > div > .addStudents > ul > li > h2{ text-align: left; font: 400 1.5rem 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.25px;
	margin: 0;}
.addGroup >  div > .addStudents > ul > li >  div > table{ height: auto; width: 100%; border-collapse: collapse; margin-top: 24px;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody{ height: auto; width: 100%; display: grid; grid-gap:8px; grid-template-columns:repeat(2, 1fr);}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr{ height: auto; width:auto; margin: 0 8px 8px 0;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td{ display: block; height: auto; width: 100%; position: relative;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > input[type="checkbox"]{	position: absolute; height: 100%; width: 100%; display: block; cursor: pointer; opacity: 0; z-index:1;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > input[type="checkbox"]:checked ~ .addSt{ border-color:#3ab870; background: #f3fff8;} 
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td> input[type="checkbox"]:checked ~ .small{background-color: #3ab870;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > .addSt { position:relative; display: grid; grid-gap:8px; grid-template-columns:48px auto; padding:4px 40px 4px 4px; box-sizing: border-box; border: 1px solid #e4e4e4; border-radius: 4px; background: #fafafe; }
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > .addSt > li{ height: auto; width: 100%; }
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > .addSt > li > img{ display: block; height:48px; width: 100%; border-radius: 4px;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > .addSt > li > h2{ text-align: left; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; margin: 0 0 4px 0;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > .addSt > li > p{ text-align: left; font: 400 .875rem 'sf_ui_textregular', sans-serif; color: #878787; margin: 0; display: flex; flex-flow: row nowrap; align-items: center;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > .addSt > li > p > span{ display: inline-block; color: #202020; margin-left: 5px;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > .small{ display: block; height: 24px; width: 24px; border-radius: 50%; position: absolute; top: 20px; right: 10px; background:url(../icons/check.svg) no-repeat center #d0d0d0; background-size: 18px; z-index: 1;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > .addSt > p{ text-align: left; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #000; margin: 0;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > input[type="checkbox"]:checked ~ .removeSt{ border-color:#e25a5a; background: #fff5f5;} 
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td> input[type="checkbox"]:checked ~ .smallremove{
	background-color: #e25a5a;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > .removeSt { position:relative; display: grid; grid-gap:8px; grid-template-columns:48px auto; padding:4px 40px 4px 4px; box-sizing: border-box; border: 1px solid #e4e4e4; border-radius: 4px; background: #fafafe; }
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > .removeSt > li{ height: auto; width: 100%; }
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > .removeSt > li > img{ display: block; height: 48px; width: 100%; border-radius: 4px;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > .removeSt > li > h2{ text-align: left; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; margin: 0 0 4px 0;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > .removeSt > li > p{ text-align: left; font: 400 .875rem 'sf_ui_textregular', sans-serif; color: #878787; margin: 0; display: flex; flex-flow: row nowrap; align-items: center;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > .removeSt > li > p > span{ display: inline-block; color: #202020; margin-left: 5px;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > .smallremove{ display: block; height: 24px; width: 24px; border-radius: 50%; position: absolute; top: 20px; right: 10px; background:url(../icons/x.svg) no-repeat center #d0d0d0; background-size: 18px; z-index: 1;}
.addGroup >  div > .addStudents > ul > li >  div > table > tbody > tr > td > .removeSt > p{ text-align: left; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #000; margin: 0;}
.addGroup >  div > .groupMSG{ height: auto; width: 100%; margin-top: 40px;}
.addGroup >  div > .groupMSG > label{ display: block; width: 100%; text-align: left; font: 400 1.25rem 'sf_ui_textmedium', sans-serif; color: #202020; letter-spacing: -.25px;}
.addGroup >  div > .groupMSG > textarea{ display: block; width: 100%; height: 96px; padding: 16px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; letter-spacing: -.25px; margin-top: 8px;}
.addGroup >  div > .groupMSG > .textcount{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; margin-top: 8px;}
.addGroup >  div > .groupMSG > .textcount > label{ display: inline-block; color: #878787;}
.addGroup >  div > .groupMSG > .textcount > input{ display: inline-block; height: 32px; width: 48px; border-radius: 4px; border: 1px solid #ddd; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; margin-right: 8px; padding: 8px; box-sizing: border-box; text-align: center;}
.addGroup >  div > .groupMSG > .sendbuttns{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; margin-top: 16px;}
.addGroup >  div > .groupMSG > .sendbuttns > input{ display: block; width: 216px; height: 56px; border: 2px solid #3ab870; box-sizing: border-box; background: #3ab870; margin: 0 8px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #fff; border-radius: 4px; cursor: pointer;}
.addGroup >  div > .groupMSG > .sendbuttns > input:hover{ box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.addGroup >  div > .groupMSG > .sendbuttns > input.push{ background: #fff !important; color: #3ab870 !important;}
.addGroup >  div > .groupMSG > .sendbuttns > input.push:hover{ background: #3ab870 !important; color: #fff !important;}

/******** Select Class Section Announcement *************/

.select_classSec{ background: #ffffff; padding: 32px; width: 100%; box-sizing: border-box; margin-top: 24px; border-radius: 4px;}
.select_classSec > h1{ text-align: left; font: 400 1.25rem 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.25px; margin: 0;}
.select_classSec > div > .employee-search{ height: auto; width: 100%; display: grid; grid-gap:16px; grid-template-columns:16% 16% 16% 8%; margin-top: 24px; align-items:flex-start;}
.select_classSec > div > .employee-search > li{ height: auto; width: 100%;}
.select_classSec > div > .employee-search > li > label{ text-align: left; display: block; font-size:1rem; color: #878787;}
.select_classSec > div > .employee-search > li > select{ width: 100%; display: block; margin-top: 8px;}
.select_classSec > div > .employee-search > li > .erromsg{ height: 18px; width: 100%; display: inline-block; text-align: left; background: url(../icons/error_msg.svg) no-repeat left center; background-size: 18px; padding-left: 26px; font-size:1rem; color:#f00; margin-top: 4px;}
.select_classSec > div > .employee-search > li > input[type=submit]{ display: block; height: 40px; width: 100%; border-radius: 4px; 
	font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #fff; text-align: center; background: #0c75ed; border: none; cursor: pointer; appearance:none; -moz-appearance:none; -o-appearance:none; -ms-appearance:none; -webkit-appearance:none; margin-bottom: 29px;}
.select_classSec > div > .employee-search > li > input[type=submit]:hover{ background: #0b66ce; box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.select_classSec > div > .employee_search_results{ height: auto; width: 100%; margin-top: 24px;}
.select_classSec > div > .employee_search_results > .message{ height: auto; width: 100%; margin-top: 40px;}
.select_classSec > div > .employee_search_results > .message > label{ display: block; width: 100%; text-align: left; font: 400 1.25rem 'sf_ui_textmedium', sans-serif; color: #202020; letter-spacing: -.25px;}
.select_classSec > div > .employee_search_results > .message > textarea{ display: block; width: 100%; height: 96px; padding: 16px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; letter-spacing: -.25px; margin-top: 8px;}
.select_classSec > div > .employee_search_results > .message > .textcount{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; margin-top: 8px;}
.select_classSec > div > .employee_search_results > .message > .textcount > label{ display: inline-block; color: #878787;}
.select_classSec > div > .employee_search_results > .message > .textcount > .numbersofChart{ display: inline-block; height: 32px; width: 48px; border-radius: 4px; border: 1px solid #ddd; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; margin-right: 8px; padding: 8px; box-sizing: border-box; text-align: center;}

.select_classSec > div > .employee_search_results > .employee_table{ height: auto; width: 100%;}
.select_classSec > div > .employee_search_results > .employee_table > div > table{ height: auto; width: 100%; border-collapse: collapse; border:none;}
.select_classSec > div > .employee_search_results > .employee_table > div > table tbody{ height: auto; width: 100%; display:flex; flex-flow: row wrap; align-items: flex-start; background: #fff;}
.select_classSec > div > .employee_search_results > .employee_table > div > table tbody tr{ width:16%; height: auto;  margin: 0 8px 8px 0;}
.select_classSec > div > .employee_search_results > .employee_table > div > table tbody tr td{ height: auto; width:auto; position: relative; display: block;}
.select_classSec > div > .employee_search_results > .employee_table > div > table tbody tr td > input[type="checkbox"]{	position: absolute; height: 100%; width: 100%; display: block; cursor: pointer; opacity: 0; z-index:1;}
.select_classSec > div > .employee_search_results > .employee_table > div > table tbody tr td > input[type="checkbox"]:checked ~ .employee{ border-color:#3ab870;} 
.select_classSec > div > .employee_search_results > .employee_table > div > table tbody tr td > input[type="checkbox"]:checked ~ .employee > small{
	background-color: #3ab870;}
.select_classSec > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee { border: 1px solid #e4e4e4; padding: 8px 42px 8px 8px; box-sizing: border-box; position:relative; border-radius: 4px; background: #fff; }
.select_classSec > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > small{ display: block; height: 18px; width: 18px; border-radius: 50%; position: absolute; top: 0;bottom:0;margin:auto; right: 8px; background:url(../icons/check.svg) no-repeat center #d0d0d0; background-size: 14px;}
.select_classSec > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > ul{ height: auto; width: 100%; display: grid; grid-gap:16px; }
/*.select_classSec > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > ul{ height: auto; width: 100%; display: grid; grid-gap:16px; grid-template-columns:48px auto;}*/
.select_classSec > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > ul > li{ height:auto; width: 100%;}
.select_classSec > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > ul > li > img{ display: block; width: 100%;max-height: 51px; overflow: hidden; object-fit: cover; border-radius: 4px;}
.select_classSec > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > ul > li > h2{ text-align: left; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #000; margin:0 0 4px 0; letter-spacing: -.02px;}
.select_classSec > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > ul > li > p{ text-align: left; font: 400 .87rem/.875rem 'sf_ui_textregular', sans-serif; color: #575757; margin: 0 0 3px 0; }
.select_classSec > div > .employee_search_results > .employee_table > div > table tbody tr td > .employee > ul > li > p > b{ text-align: left; font: 400 .87rem/.875rem 'sf_ui_textmedium', sans-serif; color: #000; margin: 0;}

.select_classSec > div > .employee_search_results > .message > .sendbuttns{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; margin-top: 16px;}
.select_classSec > div > .employee_search_results > .message > .sendbuttns > input{ display: block; width: 216px; height: 56px; border: 2px solid #3ab870; box-sizing: border-box; background: #3ab870; margin: 0 8px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #fff; border-radius: 4px; cursor: pointer;}
.select_classSec > div > .employee_search_results > .message > .sendbuttns > input:hover{ box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.select_classSec > div > .employee_search_results > .message > .sendbuttns > input.push{ background: #fff !important; color: #3ab870 !important;}
.select_classSec > div > .employee_search_results > .message > .sendbuttns > input.push:hover{ background: #3ab870 !important; color: #fff !important;}

.select_classSec > div > .employee_search_results > .message1{ height: auto; width: 100%; margin-top: 24px;}
.select_classSec > div > .employee_search_results > .message1 > label{ display: block; width: 100%; text-align: left; font: 400 1.25rem 'sf_ui_textmedium', sans-serif; color: #202020; letter-spacing: -.25px;}
.select_classSec > div > .employee_search_results > .message1 > textarea{ display: block; width: 100%; height: 96px; padding: 16px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; letter-spacing: -.25px; margin-top: 8px;}
.select_classSec > div > .employee_search_results > .message1 > .textcount{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; margin-top: 8px;}
.select_classSec > div > .employee_search_results > .message1 > .textcount > label{ display: inline-block; color: #878787;}
.select_classSec > div > .employee_search_results > .message1 > .textcount > .numbersofChart{ display: inline-block; height: 32px; width: 48px; border-radius: 4px; border: 1px solid #ddd; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; margin-right: 8px; padding: 8px; box-sizing: border-box; text-align: center;}


.select_classSec > div > .employee_search_results > .message1 > .sendbuttns{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; margin-top: 16px;}
.select_classSec > div > .employee_search_results > .message1 > .sendbuttns > input{ display: block; width: 216px; height: 56px; border: 2px solid #3ab870; box-sizing: border-box; background: #3ab870; margin: 0 8px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #fff; border-radius: 4px; cursor: pointer;}
.select_classSec > div > .employee_search_results > .message1 > .sendbuttns > input:hover{ box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.select_classSec > div > .employee_search_results > .message1 > .sendbuttns > input.push{ background: #fff !important; color: #3ab870 !important;}
.select_classSec > div > .employee_search_results > .message1 > .sendbuttns > input.push:hover{ background: #3ab870 !important; color: #fff !important;}
.select_classSec > div > .employee-search >  li > input[type=text]{ width: 100%; display: block; margin-top: 8px; height: 32px; border-radius: 4px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; padding: 8px; border: 1px solid #ddd; box-sizing: border-box;}
.select_classSec > div > .employee-search >  li > input[type=file]{ width: 100%; display: block; margin-top: 8px; height: 40px; border-radius: 4px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; padding: 8px;  box-sizing: border-box;}
.select_classSec  .errVideo{ background: url(../icons/error_msg.svg) no-repeat left 2px center; background-size:18px; height:auto; width: 100%; display:block !important; text-align:left;color:red;font:400 12px/18px 'sf_ui_textregular', sans-serif; margin-top:4px;padding-left:24px;box-sizing:border-box }



/******** SMS Center *************/
.smsCenter{ background: #ffffff; padding: 32px; width: 100%; box-sizing: border-box; margin-top: 24px; border-radius: 4px;}
.smsCenter > h1{ text-align: left; font: 400 1.5rem 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.25px; margin: 0;}
.smsCenter > .msgcenter{height: auto; width: 100%; display: grid; grid-gap:8px; grid-template-columns:20% 140px 2% 20% 140px; margin-top: 24px; align-items:flex-end;}
.smsCenter > .msgcenter > li{ height: auto; width: 100%;}
.smsCenter > .msgcenter > li > label{ text-align: left; display: block; font-size:1rem; color: #878787;}
.smsCenter > .msgcenter > li > select{ width: 100%; display: block; margin-top: 8px;}
.smsCenter > .msgcenter > li > input[type=text]{ width: 100%; display: block; margin-top: 8px; height: 40px; border-radius: 4px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; padding: 8px; border: 1px solid #ddd; box-sizing: border-box;}
.smsCenter > .msgcenter > li > input[type=button]{ display: block; height: 40px; width: 100%; border-radius: 4px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #fff; text-align: center; background: #0c75ed; border: none; cursor: pointer; appearance:none; -moz-appearance:none; -o-appearance:none; -ms-appearance:none; -webkit-appearance:none;}
.smsCenter > .msgcenter > li > input[type=button]:hover{ background: #0b66ce; box-shadow: 0 8px 16px rgba(0,0,0,.2);}

/*************** Birthday *******************/


.birthday{margin-top: 24px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items:flex-start;}
.birthday > .bdaystudents{ width:68%; background: #fff; box-sizing: border-box; border-radius: 4px; padding:16px;}
.birthday > .bdaystudents > div > table{ width: 100%; border-collapse: collapse;}
.birthday > .bdaystudents > div > table > tbody{ width: 100%; display: grid; grid-gap: 24px; grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );}
.birthday > .bdaystudents > div > table > tbody > tr{ width: 100%; display: inline-block;}
.birthday > .bdaystudents > div > table > tbody > tr > td{ width: 100%; display: block;}
.birthday > .bdaystudents > div > table > tbody > tr > td > .studentinfo{ height: auto; width:100%; position: relative; margin-bottom:16px;}
.birthday > .bdaystudents > div > table > tbody > tr > td > .studentinfo > input{ display: block; height: 100%; width:100%; position: absolute; opacity: 0;}
.birthday > .bdaystudents > div > table > tbody > tr > td > .studentinfo > .sinfo{ height: auto; width: 100%; padding:32px 24px; box-sizing: border-box; display: flex; flex-flow: column; align-items: center; border: 1px solid #dfdfdf; border-radius: 4px;}
.birthday > .bdaystudents > div > table > tbody > tr > td > .studentinfo > .sinfo > .photo{ height: auto;max-height:96px;overflow:hidden; width: 100%; border: 2px solid #fff; border-radius: 2px; max-width: 96px; box-shadow: 0 4px 8px rgba(0,0,0,.25);}
.birthday > .bdaystudents > div > table > tbody > tr > td > .studentinfo > .sinfo > .photo > img{ display: block; width: 100%;}
.birthday > .bdaystudents > div > table > tbody > tr > td > .studentinfo > .sinfo > h1{ text-align: center; margin: 16px 0 0 0; font: 400 1.2rem 'sf_ui_textmedium', sans-serif; color:#000;}
.birthday > .bdaystudents > div > table > tbody > tr > td > .studentinfo > .sinfo > p{ text-align: center; margin: 8px 0 0 0; font: 400 1rem 'sf_ui_textregular', sans-serif; color:#878787;}
.birthday > .bdaystudents > div > table > tbody > tr > td > .studentinfo > .sinfo > span{ height: 24px; width:24px; display: block; border-radius: 50%; background:url(../icons/check.svg) no-repeat center #c7c7c7; position: absolute; top: 16px; right: 16px; background-size: 18px;}
.birthday > .bdaystudents > div > table > tbody > tr > td > .studentinfo > input:checked ~ .sinfo{border-color: #39c965; background-color: #f5fff8;}
.birthday > .bdaystudents > div > table > tbody > tr > td > .studentinfo > input:checked ~ .sinfo  > span{background-color: #39c965;}

.birthday > .bdayselected{ width: 30%;}
.birthday > .bdayselected > .bsel > div{ width:100%; box-sizing: border-box; border: 2px solid #cee7f2; background-color: #eefaff; display:flex; flex-flow:column; align-items:center;}
.birthday > .bdayselected > .bsel > div > .bdayheading{ height: auto; width: 100%; background: url(../images/topflag.png) no-repeat top center; background-size:100%; padding-bottom:40px;}
.birthday > .bdayselected > .bsel > div > .bdayheading > h2{ text-align: center; font: 400 1.2rem 'sf_ui_textmedium', sans-serif; color: #000; margin: 0; padding: 80px 0 8px;}
.birthday > .bdayselected > .bsel > div > .bdayheading > h1{ text-align: center; font: 400 2rem Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; color: red; margin: 0;}
.birthday > .bdayselected > .bsel > div > .bdayheading > h2{ text-align: center; font: 400 1.2rem 'sf_ui_textmedium', sans-serif; color: #000; margin: 0; padding: 80px 0 8px;}

.birthday > .bdayselected  .bsel  .bdayheading1{ height: auto; width: 100%; background: url(../images/topflag2.png) no-repeat top center; background-size:100%; padding-bottom:16px;}
.birthday > .bdayselected  .bsel  .bdayheading1  h2{ text-align: center; font: 400 1.2rem 'sf_ui_textmedium', sans-serif; color: #000; margin: 0; padding: 80px 0 8px;}
.birthday > .bdayselected  .bsel  .bdayheading1  h1{ text-align: center; font: 400 2rem Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; color: red; margin: 0;}
.birthday > .bdayselected  .bsel  .bdayheading1  h3{ text-align: center; font: 400 1.2rem 'sf_ui_textregular', sans-serif; color: #000; margin: 0; padding: 12px 0 0 0;}

.birthday > .bdayselected > .bsel > div  > div   .wish{ height:auto; width:100%; max-width:250px; padding:24px 24px 48px 24px; box-sizing:border-box; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,.15); background:url(../../images/cake.png) no-repeat left bottom #fff; background-size: 50px 59px; display:flex; flex-flow:column; align-items:center; position:relative;}
/*.birthday > .bdayselected > .bsel > div  > div .wish:before{ height:112px; width:95px; content:''; position:absolute; left:-40px; bottom:-25px; background:url(../../images/cake.png) no-repeat center; background-size: 95px 112px;}*/
.birthday > .bdayselected > .bsel > div  > div .wish:after{ height:133px; width:105px; content:''; position:absolute; right:-30px; bottom:-38px; background:url(../../images/splatter.png) no-repeat center; background-size: 133px 105px;}
.birthday > .bdayselected > .bsel > div  > div .wish  .photo{ height:auto; width:100%; max-width:96px; border:2px solid #fff; border-radius:2px; box-sizing:border-box; box-shadow:0 4px 8px rgba(0,0,0,.15);}
.birthday > .bdayselected > .bsel > div  > div .wish  .photo  img{ display:block; width:100%;}
.birthday > .bdayselected > .bsel > div  > div .wish  h1{ text-align:center; font:400 1.2rem 'sf_ui_textmedium', sans-serif; color:#000; margin:16px 0 0 0; padding:0;}
.birthday > .bdayselected > .bsel > div  > div .wish  small{ text-align:center; font:400 1rem 'sf_ui_textregular', sans-serif; color:#878787; margin:8px 0 0 0; padding:0;}
.birthday > .bdayselected > .bsel > div  > div .wish  p{ text-align:center; font:400 1rem 'sf_ui_textregular', sans-serif; color:#333; margin:16px 0 0 0; padding:0;}

.birthday > .bdayselected  .bsel > div > div{width:86%;}
.birthday > .bdayselected  .bsel .multiplewish{ height: auto; width:100%; border-collapse: collapse;}
.birthday > .bdayselected  .bsel > div > div > .multiplewish > tbody{ height: auto; width:100%; display: flex; flex-flow:row wrap; justify-content:center;}
.birthday > .bdayselected  .bsel > div > div > .multiplewish >  tbody  tr{ width: 28%; display: inline-block; margin:24px 2%;}
.birthday > .bdayselected  .bsel > div > div > .multiplewish >  tbody  tr  td{ height: auto; width:100%;display:block;}
.birthday > .bdayselected  .bsel > div > div > .multiplewish >  tbody  tr  td  .photo{ height: auto;max-height:150px;overflow:hidden; width: 100%; border: 2px solid #fff; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.15);}
.birthday > .bdayselected  .bsel > div > div > .multiplewish >  tbody  tr  td  .photo  img{ display: block; width: 100%;}
.birthday > .bdayselected  .bsel > div > div > .multiplewish >  tbody  tr  td  h1{ text-align: left; font: 400 .925rem 'sf_ui_textmedium', sans-serif; color: #000; margin: 12px 0 0 0; padding: 0;}
.birthday > .bdayselected  .bsel > div > div > .multiplewish >  tbody  tr  td  p{ text-align: left; font: 400 1rem 'sf_ui_textregular', sans-serif; color: #878787;  margin: 4px 0 0 0; padding: 0;}


.birthday > .bdayselected  .bsel > div  .poweredby{ height:auto; width:100%; margin-top:48px; display:flex; flex-flow:row nowrap; align-items:center; padding:0 24px 24px 24px; box-sizing:border-box; justify-content:space-between;}
.birthday > .bdayselected  .bsel > div .poweredby > li{ height:auto; width:60%;}
.birthday > .bdayselected  .bsel > div .poweredby > li:last-child{ height:auto; width:36%;}
.birthday > .bdayselected  .bsel > div .poweredby > li:last-child > img{ max-width: 142px;}
.birthday > .bdayselected  .bsel > div .poweredby > li > img{ display:block; width:100%; max-width: 237px;}

.birthday > .bdayselected  .downloadbtn{ height: auto; width: 100%; padding: 24px 0; display: flex; align-items:center; justify-content: center; }
.birthday > .bdayselected  .downloadbtn > input{ height: 48px; width: 100%; max-width: 250px; border-radius: 4px; background:url(../icons/download.svg) no-repeat 10px center #3265d8; color: #fff; border: none; cursor: pointer; font: 400 14px/48px 'sf_ui_textmedium', sasns-serif; box-shadow:0 4px 8px rgba(0,0,0,.15); background-size: 32px;}
.birthday > .bdayselected  .downloadbtn > input:hover{ box-shadow: 0 8px 16px rgba(0,0,0,.25); background-color: #2353c0;}
#ctl00_ContentPlaceHolder1_grdSingleStudent td{display:flex;align-items:center;justify-content:center;}

.examAnalysis{ width: 100%; background: white; padding: 24px; box-sizing: border-box; border-radius: 4px; margin-top: 24px;}
.examAnalysis > .searchstats{ width: 100%; display: flex; flex-flow: row nowrap; align-items: flex-end; border-bottom: 1px solid #ddd; padding-bottom: 32px;}
.examAnalysis > .searchstats > li{ width: 200px; margin-right: 24px;}
.examAnalysis > .searchstats > li > label{display: block; width: 100%; text-align: left; font:400 1rem 'sf_ui_textregular', sans-serif; color: #575757;}
.examAnalysis > .searchstats > li > input[type=button]{ height:40px; width:100%; border-radius: 4px; border:none; text-align: center; font: 400 1rem 'sf_ui_textregular', sans-serif; color: #fff; cursor: pointer; background: #0c75ed; margin:0 0 16px 0;}
.examAnalysis > .searchstats > li > input[type=button]:hover{ background: #0b66ce;}
.examAnalysis > .searchstats > li > .error{ display:block; text-align:left; font:400 12px/16px 'sf_ui_textregular', sans-serif;color:red; top:5px; position:relative;}
.examAnalysis  .piechartsnstats{ width: 100%; display: grid; grid-gap: 24px; grid-template-columns: repeat( auto-fit, minmax(120px, 1fr)); margin-top: 32px;}
.examAnalysis  .piechartsnstats > .piechart{ padding: 0 200px; box-sizing: border-box;}
.examAnalysis  .piechartsnstats > .stats{ width: 100%;}
.examAnalysis  .piechartsnstats > .stats > ul{ display: grid; grid-gap:16px;  grid-template-columns: repeat(2, 1fr);}
.examAnalysis  .piechartsnstats > .stats > ul > li{ width: 100%; border-radius: 8px; padding:48px 24px; box-sizing: border-box; background: #575757; position: relative;}
.examAnalysis  .piechartsnstats > .stats > ul > li.a{ background-image: linear-gradient(to top, #2c5bd2 , #2372de);}
.examAnalysis  .piechartsnstats > .stats > ul > li.b{ background-image: linear-gradient(to top, #0b96c3 , #0ca6cc);}
.examAnalysis  .piechartsnstats > .stats > ul > li.c{ background-image: linear-gradient(to top, #0ab087 , #0bc799);}
.examAnalysis  .piechartsnstats > .stats > ul > li.d{ background-image: linear-gradient(to top, #9444e5, #9e4ef1);}
.examAnalysis  .piechartsnstats > .stats > ul > li.e{ background-image: linear-gradient(to top, #d9b136 , #e7be42);}
.examAnalysis  .piechartsnstats > .stats > ul > li.f{ background-image: linear-gradient(to top, #ec7c4a , #f68452);}
.examAnalysis  .piechartsnstats > .stats > ul > li > p{ text-align: center; font: 400 18px 'sf_ui_textregular', sans-serif; color:#fff;}
.examAnalysis  .piechartsnstats > .stats > ul > li > h1{ text-align: center; font: 400 36px 'sf_ui_textsemibold', sans-serif; color:#fff; margin: 24px 0 0 0;}
.examAnalysis  .piechartsnstats > .stats > ul > li > small{ height: 32px; width: 32px; display: flex; align-items:center; justify-content:center; background: #fff; border-radius: 50%; position: absolute; top:16px; right:16px;}
.examAnalysis  .piechartsnstats > .stats > ul > li > small > img{ display: block; width:18px;}
.examAnalysis  .piechartsnstats > .stats > .grading{ width: 100%; display: grid; grid-gap: 8px; grid-template-columns: repeat(6, 1fr); margin-top:16px;  }
.examAnalysis  .piechartsnstats > .stats > .grading > dt{ width: 100%; padding: 24px; box-sizing: border-box; border-radius: 8px; background: #57575f;}
.examAnalysis  .piechartsnstats > .stats > .grading > dt.a{ background:#47474f;}
.examAnalysis  .piechartsnstats > .stats > .grading > dt.b{ background:#57575f;}
.examAnalysis  .piechartsnstats > .stats > .grading > dt.c{ background:#67676f;}
.examAnalysis  .piechartsnstats > .stats > .grading > dt.d{ background:#77777f;}
.examAnalysis  .piechartsnstats > .stats > .grading > dt.e{ background:#87878f;}
.examAnalysis  .piechartsnstats > .stats > .grading > dt.f{ background:#97979f;}
.examAnalysis  .piechartsnstats > .stats > .grading > dt > p{ text-align: center; font: 400 1.02rem 'sf_ui_textregular', sans-serif; color: white; display: flex; flex-flow: row nowrap; align-items:center; justify-content: center;}
.examAnalysis  .piechartsnstats > .stats > .grading > dt > p > small{ display: inline-block; font: 400 1.02rem 'sf_ui_textmedium', sans-serif; color: white; margin-left: 4px;}
.examAnalysis  .piechartsnstats > .stats > .grading > dt > h1{ text-align: center; font: 400 2rem 'sf_ui_textsemibold', sans-serif; color: white;  margin: 16px 0 8px 0;}
.examAnalysis  .piechartsnstats > .stats > .grading > dt > small{ text-align:center; font: 400 .925rem 'sf_ui_textregular', sans-serif; color: white;  display: block; width: 100%;}
.examAnalysis  .piechartsnstats > .stats > .grading > dt > small.up{ background: url(../icons/arrow_drop_up_white.svg) no-repeat left center; padding-left: 28px; box-sizing: border-box; background-size: 24px;}
.examAnalysis  .piechartsnstats > .stats > .grading > dt > small.down{ background: url(../icons/arrow_drop_down_white.svg) no-repeat left center; padding-left: 28px; box-sizing: border-box; background-size: 24px;}
.examAnalysis  .subjectgradedata{ width: 100%; margin-top: 48px; border-top: 1px solid #ddd; padding-top:32px;}
.examAnalysis  .subjectgradedata > h1{ text-align: left; font: 400 1.6rem 'sf_ui_textsemibold', sans-serif; color: #000; margin: 0 0 24px 0;}
.examAnalysis  .performancereport{ width: 100%; margin-top: 48px; border-top: 1px solid #ddd; padding-top:32px;}
.examAnalysis  .performancereport > h1{ text-align: left; font: 400 1.6rem 'sf_ui_textsemibold', sans-serif; color: #000; margin: 0 0 24px 0;}
.examAnalysis  .performancereport > .performancetabel{ width: 100%; margin-top: 24px;}
.examAnalysis  .performancereport > .performancetabel   table{ width: 100%; border-collapse: collapse;}
.examAnalysis  .performancereport > .performancetabel   table > tbody{ width: 100%;}
.examAnalysis  .performancereport > .performancetabel   table > tbody > tr > th{ padding: 8px; border: 1px solid #b0b0b0; text-align: center; font: 400 .925rem 'sf_ui_textmedium', sans-serif; color: #202020; background:#eee;}
.examAnalysis  .performancereport > .performancetabel   table > tbody > tr > td{ padding: 8px; border: 1px solid #b0b0b0; text-align: center; font: 400 1.02rem 'sf_ui_textregular', sans-serif; color: #000;}
.examAnalysis  .piechartsnstats > .stats > ul > li >h1>  sub{font-size:12px;margin-left:4px;display: inline-block;position: relative;bottom: 13px;padding:3px 5px;background: yellow;border-radius: 4px;color: #000;}
/******************** Transport ********************/

.transport{ background: #ffffff; padding: 32px; width: 100%; box-sizing: border-box; margin-top: 24px; border-radius: 4px;}
.transport > h1{ text-align: left; font: 400 1.5rem 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.25px; margin: 0;}
.transport > .addStation{ width: 100%; margin-top: 40px; display: grid; grid-gap: 24px; grid-template-columns: repeat(4, 1fr);}
.transport > .addStation > dt{ width: 100%;}
.transport > .addStation > dt:nth-child(1){ grid-row:1 ; grid-column: 1 / 3;}
.transport > .addStation > dt:nth-child(2){ grid-row:1 / 3 ; grid-column: 3 / 5;}
.transport > .addStation > dt:nth-child(3){ grid-row:2 ; grid-column: 1 / 2;}
.transport > .addStation > dt:nth-child(4){ grid-row:2 ; grid-column: 2 / 3;}
.transport > .addStation > dt:nth-child(5){ grid-row:3 ; grid-column: 1 / 5;}
.transport > .addStation > dt > label{ text-align: left; display: block; font-size:1rem; color: #878787;}
.transport > .addStation > dt > input[type=text]{ width: 100%; display: block; margin-top: 8px; height: 40px; border-radius: 4px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; padding: 8px; border: 1px solid #ddd; box-sizing: border-box;}
.transport > .addStation > dt > .erromsg{ height: 18px; width: 100%; display: inline-block; text-align: left; background: url(../icons/error_msg.svg) no-repeat left center; background-size: 18px; padding-left: 26px; font-size:1rem; color:#f00; margin-top: 4px;}
.transport > .addStation > dt > textarea{ height:132px; width: 100%; display: block; margin-top: 8px; border-radius: 4px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; padding: 8px; border: 1px solid #ddd; box-sizing: border-box;}


.transport > .addStation > dt > table{border-collapse: collapse;}
.transport > .addStation > dt >  table > tbody{ display: flex; flex-flow: row wrap; align-items: center;}
.transport > .addStation > dt >  table > tbody > tr{ display: inline-block; margin: 2px;}
.transport > .addStation > dt >  table > tbody > tr > td{ display: block; position: relative; border:none; padding:0px;}
.transport > .addStation > dt >  table > tbody > tr > td > input{ position: absolute; height: 100%; width: 100%; opacity: 0; cursor: pointer;}
.transport > .addStation > dt >  table > tbody > tr > td > label{display: block; height: 24px; width: auto; background: url(../icons/unchecked.svg) no-repeat left 4px center #f0f0f0; background-size: 22px; box-sizing: border-box;  padding: 0 12px 0 32px; border-radius: 4px; font: 400 1rem/24px 'sf_ui_textsemibold', sans-serif; color: #000;}
.transport > .addStation > dt >  table > tbody > tr > td > input:checked ~ label{background: url(../icons/checkedsquare.svg) no-repeat left 4px center #f0f0f0; background-size: 22px;}

.transport > .sendbuttns{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; padding-top: 32px;}
.transport > .sendbuttns > input{ display: block; width: 216px; height: 56px; border: 2px solid #3ab870; box-sizing: border-box; background: #3ab870; margin: 0 8px; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #fff; border-radius: 4px; cursor: pointer;}
.transport > .sendbuttns > input:hover{ box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.transport > .sendbuttns > input.push{ background: #fff !important; color: #3ab870 !important;}
.transport > .sendbuttns > input.push:hover{ background: #3ab870 !important; color: #fff !important;}

.transport  .transportTable{ width: 100%; margin-top: 40px;}
.transport  .transportTable  table{ width: 100%; border-collapse: collapse;}
.transport  .transportTable  table > tbody{ width: 100%;}
.transport  .transportTable  table > tbody > tr{border: 1px solid #e8e8e8;}  
.transport  .transportTable  table > tbody > tr > th{ height: auto; width: auto; padding: 8px; text-align: center; font: 400 .925rem 'sf_ui_textregular', sans-serif; color: #878787;background: #f6f6fa;}
.transport  .transportTable  table > tbody > tr > td{ height: auto; width: auto; padding: 8px; text-align: center; font: 400 1rem 'sf_ui_textregular', sans-serif; color: #000; position: relative;}
.transport  .transportTable  table > tbody > tr > td > .status{ height: auto; width:auto; position: relative;}
.transport  .transportTable  table > tbody > tr > td > .status > input[type=checkbox]{position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; cursor: pointer;}
.transport  .transportTable  table > tbody > tr > td > .status > span { display: inline-block; box-sizing: border-box; height: 30px; width: auto; padding: 0 12px 0 32px; border-radius: 40px; background:url(../icons/checked.svg) no-repeat left 6px center #ea3d3e; background-size: 18px; color: #fff; font: 400 14px/30px 'sf_ui_textregular', sans-serif; }
.transport  .transportTable  table > tbody > tr > td > .status > input[type=checkbox]:checked ~ span{ background-color:#09aa5a; }
.transport  .transportTable  table > tbody > tr > td > .actions{ display:flex; flex-flow: row nowrap; align-items: center; justify-content: center;}
.transport  .transportTable  table > tbody > tr > td > .actions > .edit{ height:32px; width: auto; padding: 0 12px 0 40px; border-radius: 4px; border:none; background:url(../icons/edit-3.svg) no-repeat 12px center #297af3; background-size:18px; font: 400 14px/32px 'sf_ui_textregular', sans-serif; color: #fff; display: inline-block;}
.transport  .transportTable  table > tbody > tr > td > .actions > .statusactive{ height:32px; width: auto; padding: 0 12px 0 40px; border-radius: 4px; border:none; background:url(../icons/checked.svg) no-repeat 12px center #09aa5a; background-size:18px; font: 400 14px/32px 'sf_ui_textregular', sans-serif; color: #fff; display: inline-block;}
.transport  .transportTable  table > tbody > tr > td > .actions > .statusactive:hover{ background-color:#ea3d3e;}
.transport  .transportTable  table > tbody > tr > td > .actions > .statusinactive{ height:32px; width: auto; padding: 0 12px 0 40px; border-radius: 4px; border:none; background:url(../icons/checked.svg) no-repeat 12px center #ea3d3e; background-size:18px; font: 400 14px/32px 'sf_ui_textregular', sans-serif; color: #fff; display: inline-block;}
.transport  .transportTable  table > tbody > tr > td > .actions > .statusinactive:hover{ background-color:#09aa5a;}
.transport  .transportTable  table > tbody > tr > td > .actions > .edit:hover{ background-color:#1c62cc;}
.transport  .transportTable  table > tbody > tr > td > .actions > input[type="submit"]{ height:32px; width: auto; padding: 0 12px 0 40px; border-radius: 4px; border:none; background:url(../icons/trash-2.svg) no-repeat 12px center #e03940; background-size:18px; font: 400 14px/32px 'sf_ui_textregular', sans-serif; color: #fff; display: inline-block; margin:0 6px;}
.transport  .transportTable  table > tbody > tr > td > .actions > input[type="submit"]:hover{ background-color:#c82e35;}

.transport  .transportsearchTop{ height: auto; width: 100%; display: grid; grid-gap:16px; grid-template-columns:16% 16% 16%; margin-top: 24px; align-items:flex-end;}
.transport  .transportsearchTop > li{ height: auto; width: 100%;}
.transport  .transportsearchTop > li > label{ text-align: left; display: block; font-size:1rem; color: #878787;}
.transport  .transportsearchTop > li > select{ width: 100%; display: block; margin-top: 8px;}
.transport  .transportsearchTop > li > input[type=text]{ width: 100%; display: block; margin-top: 8px; height: 40px; border-radius: 4px; font: 400 1em 'sf_ui_textmedium', sans-serif; color: #202020; padding: 8px; border: 1px solid #ddd; box-sizing: border-box;}
.transport  .transportsearchTop > li > .senddate{ background: url(../icons/calendar.svg) no-repeat 96% center #fff !important; background-size: 20px !important; padding-right: 32px !important;}
.transport  .transportsearchTop > li > input[type=submit]{ display: block; height: 40px; width: 100%; border-radius: 4px; font: 400 1em 'sf_ui_textmedium', sans-serif; color: #fff; text-align: center; background: #0c75ed; border: none; cursor: pointer; appearance:none; -moz-appearance:none; -o-appearance:none; -ms-appearance:none; -webkit-appearance:none;}
.transport  .transportsearchTop > li > input[type=submit]:hover{ background: #0b66ce; box-shadow: 0 8px 16px rgba(0,0,0,.2);}
/**************** Home Screen **************/
.home{width: 100%; margin-top: 24px;} 
.home > ul{width:100%; display: grid; grid-gap:16px; grid-template-columns: repeat(5, 1fr);}
.home > ul > li{ width:100%;}
.home > ul > li > a{ display:flex; flex-flow: column; align-items: center;  padding:32px; border-radius:4px; background:#fff; box-sizing:border-box; width:100%; box-shadow:0 4px 8px rgba(0,0,0,.05);}
.home > ul > li > a > small{ border:2px solid #0c75ed; height:48px; width:48px; border-radius:50%; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.home > ul > li > a > b{ text-align: center; margin-top: 32px; font: 400 16px 'sf_ui_textmedium', sans-serif; color:black;}
.home > ul > li > a > small > img{ display: block; width: 24px;}
.home > ul > li > a:hover{ background: #0c75ed;  box-shadow:0 8px 24px rgba(0,0,0,.15);}
.home > ul > li > a:hover > b{ color: white;}

/*Progress Bar*/
.loader{height:100%;width:100%;position:absolute;top:0;left:0;z-index:999;background:rgba(0,0,0,.5);display:flex; align-items:center; justify-content:center;}
.loader img{ width:100px; position:fixed;top:0;left:0;bottom:0;right:0;margin:auto;}
/*Progress Bar*/

* {
    margin: 0;
    padding: 0;
}

.modalpopup {
    height: auto;
    width: 100%;
    max-width: 460px;
    padding: 20px 30px 30px 30px;
    box-sizing: border-box;
    background: #fff;
    margin: 0 auto;
}

.message {
    text-align: center;
    font: 400 14px Roboto, sans-serif;
    color: red;
}

.modalpopup ul {
    height: auto;
    width: 100%;
    list-style: none;
    font-size: 18px;
    text-align: justify;
}

    .modalpopup ul > li {
        height: auto;
        width: 100%;
        margin-top: 15px;
    }

        .modalpopup ul > li > span {
            display: block;
            width: 100%;
            font: 400 13px Roboto, sans-serif;
            color: #575757;
            text-align: left;
        }

        .modalpopup ul > li > input[type=text], .modalpopup ul > li > input[type=password] {
            display: block;
            width: 100%;
            border: 1px solid #d0d0d0;
            border-radius: 4px;
            padding: 6px;
            height: 32px;
            box-sizing: border-box;
            font: 400 15px Roboto, sans-serif;
            color: #000;
            margin-top: 5px;
        }

        .modalpopup ul > li:last-child {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: flex-end;
        }

            .modalpopup ul > li:last-child > input[type=button], .modalpopup ul > li:last-child > input[type=submit] {
                display: inline-block;
                height: 32px;
                width: 185px;
                text-align: center;
                font: 700 12px Roboto, sans-serif;
                background-color: dodgerblue;
                color: white;
                border: none;
                margin-left: 15px;
                text-transform: uppercase;
                border-radius: 2px;
                cursor: pointer;
                appearance: none;
                -moz-appearance: none;
                -ms-appearance: none;
                -webkit-appearance: none;
                -o-appearance: none;
            }


.modalBackground {
    background-color: rgba(0,0,0,.2);
    filter: alpha(opacity=90);
    opacity: 0.8;
}

@media screen and (max-width:1680px){
		.birthday > .bdaystudents{width:64%;}
		.birthday > .bdaystudents > .studentinfo{ width:32%;}
		.birthday > .bdayselected{ width: 35%;}
		.examAnalysis .piechartsnstats > .piechart{ padding: 0 160px; box-sizing: border-box;}
        
	}
@media screen and (max-width:1440px){
	.examAnalysis .piechartsnstats > .piechart{ padding: 0 140px; box-sizing: border-box;}	
}
@media screen and (max-width:1368px){
	.communication_dash{ grid-template-columns:282px auto;}
	.examAnalysis > .piechartsnstats > .stats > ul{  grid-template-columns: repeat( auto-fit, minmax(220px, 1fr));}
	.examAnalysis > .piechartsnstats > .stats > .grading{grid-template-columns: repeat( auto-fit, minmax(125px, 1fr))}
	.examAnalysis .piechartsnstats > .piechart{ padding: 0 80px; box-sizing: border-box;}
	.sendBox > .searchSMS{grid-template-columns:repeat(3, 1fr);}
}
@media screen and (max-width:1280px){
	.communication_dash{ grid-template-columns:282px auto;}
	.communication_dash > .chatsandnotifications > .messages_n_announcements{ grid-template-columns:100%;}
	.sendBox > .searchSMS{grid-template-columns:repeat(3, 1fr);}
	.addGroup > .searchGroup, .select_emp > .employee-search,  .select_class > .class_table > table tbody{ grid-template-columns:repeat(4, 1fr);}
    .examAnalysis .piechartsnstats > .piechart{ padding: 0 80px; box-sizing: border-box;}
    .select_emp > div > .employee-search{ grid-template-columns:repeat(4, 1fr);}
    .select_emp > div > .employee-search > li > select{ max-width:100%;}
    .select_emp > div > .employee_search_results > .employee_table > div > table tbody{ grid-template-columns:repeat(3, 1fr);}
    .select_emp > div > .employee_search_results > .employee_table > div > table tbody tr{width:32%;}

    	.select_emp > .employee-search, .addGroup > .searchGroup, .send_to_many > .send-search{ grid-template-columns:repeat(4, 1fr);}
	.communication_dash > .chatsandnotifications > .messages_n_announcements > li > dl{ grid-template-columns:100%;}
	.select_class > .class_table > table tbody{ grid-template-columns:repeat(3, 1fr);}
.send_to_many  .send-search{ grid-template-columns:repeat(4, 1fr);}
.retbook > li > input[type=text], select{ max-width:100%;}
	
}
@media screen and (max-width:1024px){
	.communication_dash{ grid-template-columns:270px auto;}
	.communication_dash .chatsandnotifications > .messages_n_announcements{ grid-template-columns:100%;}
	.addGroup > .searchGroup, .select_emp > .employee-search, .send_to_many > .send-search, .select_class > .class_table > table tbody{ grid-template-columns:repeat(4, 1fr);}
	.sendBox > .searchSMS{grid-template-columns:repeat(3, 1fr);}
    .examAnalysis .piechartsnstats > .piechart{ padding: 0 80px; box-sizing: border-box;}
    .addGroup > div > .addStudents > ul > li > div > table > tbody{grid-template-columns:100%;}
    .select_emp > div > .employee-search{ grid-template-columns:repeat(3, 1fr);}
    .select_emp > div > .employee-search > li > select{ max-width:100%;}
    .select_emp > div > .employee_search_results > .employee_table > div > table tbody{ grid-template-columns:repeat(2, 1fr);}
        .select_emp > div > .employee_search_results > .employee_table > div > table tbody tr {
            width: 49%;
        }
        
    .select_class > .class_table > div > table tbody{ grid-template-columns:repeat(3, 1fr);}
.subHeading > li > a, .subHeading > li > a.active{ width: 32px; font-size: 0; padding: 0; background-position: center !important;}
    .select_emp > .employee-search, .addGroup > .searchGroup, .send_to_many > .send-search{ grid-template-columns:repeat(4, 1fr);}
	.select_emp > .employee_search_results > .employee_table > table tbody tr{ width:calc(50% - 8px);}
.send_to_many  .send-search{ grid-template-columns:repeat(4, 1fr);}
.retbook > li > input[type=text], select{ max-width:100%;}
}
@media screen and (max-width:768px){
	.communication_dash{ grid-template-columns:282px auto;}
	.communication_dash  .chatsandnotifications > .messages_n_announcements{ grid-template-columns:100%;}
	.communication_dash   .chatsandnotifications > .heading1{grid-template-columns:100%; grid-gap:1em;}
		.communication_dash  .chatsandnotifications > .heading1 > li > .period{ justify-content: flex-start; margin-top: 16px;}
	.send_to_many  .send-search{ grid-template-columns:repeat(2, 1fr);}

	.addGroup > .searchGroup, .select_emp > .employee-search { grid-template-columns:repeat(4, 1fr);}
	.select_class > .class_table > table tbody, .send_to_many > .send-search, .sendBox > .searchSMS{grid-template-columns:repeat(3, 1fr);}
    .addGroup > div > .addStudents > ul > li > div > table > tbody{grid-template-columns:100%;}
    .select_emp > div > .employee-search{ grid-template-columns:repeat(3, 1fr);}
    .select_emp > div > .employee-search > li > select{ max-width:100%;}
    .select_emp > div > .employee_search_results > .employee_table > div > table tbody tr{width:49%;}
    .select_class > .class_table > div > table tbody{ grid-template-columns:repeat(2, 1fr);}
    .subHeading > li > a, .subHeading > li > a.active{ width: 32px; font-size: 0; padding: 0; background-position: center !important;}
.retbook > li > input[type=text], select{ max-width:100%;}
}
@media screen and (max-width:560px){
	.communication_dash{ grid-template-columns:100%;}
	.communication_dash .chatsandnotifications > .messages_n_announcements, .communication_dash .chatsandnotifications .heading1{ grid-template-columns:100%;}
.communication_dash  .chatsandnotifications > .heading1 > li > .period{ justify-content: flex-start; margin-top: 16px;}
	.addGroup > .searchGroup,  .select_emp > .employee-search,  .select_class > .class_table > table tbody, .send_to_many > .send-search, .sendBox > .searchSMS{ grid-template-columns:repeat(2, 1fr);}
	.addGroup > .addStudents > ul, .send_to_many .send-search{ grid-template-columns:100%;}
    .addGroup > div > .addStudents > ul, .addGroup > div > .addStudents > ul > li > div > table > tbody {grid-template-columns: 100%;}
    .select_emp > div > .employee-search{ grid-template-columns:100%;}
    .select_emp > div > .employee-search > li > select{ max-width:100%;}
    .select_emp > div > .employee_search_results > .employee_table > div > table tbody{ flex-flow:column;}
    .select_emp > div > .employee_search_results > .employee_table > div > table tbody tr{width:100%;}
    .select_class > .class_table > div > table tbody, .smspopup > .groupmembers > .groupmembersinner{ grid-template-columns:100%;}
    .subHeading > li > a, .subHeading > li > a.active{ width: 32px; font-size: 0; padding: 0; background-position: center !important;}
.retbook > li > input[type=text], select{ max-width:100%;}

.send_to_many .message1 > .sendbuttns{flex-flow:column;}
.send_to_many .message1 > .sendbuttns > input{ margin-top:8px; width:100%;}
}
@media screen and (max-width:480px){
	.communication_dash{ grid-template-columns:100%;}
	.communication_dash .chatsandnotifications > .messages_n_announcements, .communication_dash .chatsandnotifications .heading1{ grid-template-columns:100%;}
.communication_dash  .chatsandnotifications > .heading1 > li > .period{ justify-content: flex-start; margin-top: 16px;}
	.addGroup > .searchGroup, .select_emp > .employee-search, .send_to_many .send-search, .sendBox > .searchSMS{ grid-template-columns: 100%;}
	.addGroup > .addStudents > ul, .select_class > .class_table > table tbody{ grid-template-columns:100%;}	
	.addGroup > .groupMSG > .sendbuttns, .select_emp > .employee_search_results > .message > .sendbuttns, .send_to_many > .message > .sendbuttns, .select_class > .message > .sendbuttns{ flex-flow: column;}
	.addGroup > .groupMSG > .sendbuttns > input, .select_emp > .employee_search_results > .message > .sendbuttns > input, .send_to_many > .message > .sendbuttns > input, .select_class > .message > .sendbuttns > input{ margin: 4px 0;}
	.select_emp > .employee_search_results > .employee_table > table tbody tr, .addGroup > .addStudents > ul > li > table > tbody > tr{ width: 100%;}

    .addGroup > div > .addStudents > ul, .addGroup > div > .addStudents > ul > li > div > table > tbody {grid-template-columns: 100%;}
    .select_emp > div > .employee-search{ grid-template-columns:100%;}
    .select_emp > div > .employee-search > li > select{ max-width:100%;}
    .select_emp > div > .employee_search_results > .employee_table > div > table tbody{ flex-flow:column;}
    .select_emp > div > .employee_search_results > .employee_table > div > table tbody tr{width:100%;}
    .select_class > .class_table > div > table tbody, .smspopup > .groupmembers > .groupmembersinner{ grid-template-columns:100%;}
.subHeading > li > a, .subHeading > li > a.active{ width: 32px; font-size: 0; padding: 0; background-position: center !important;}

.retbook > li > input[type=text], select{ max-width:100%;}

.send_to_many .message1 > .sendbuttns{flex-flow:column;}
.send_to_many .message1 > .sendbuttns > input{ margin-top:8px; width:100%;}


}


/************* Quick Pay ***********/

.quickPayWrapper{ margin: 0 auto; width: 100%; background-color: white;  max-width: 1024px;}
.quickPayWrapper > .quickHeader{ width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; padding: 20px 32px; box-sizing: border-box; border-bottom: 1px solid #ddd;}
.quickPayWrapper > .quickHeader > li{ width: 100%; text-align: left;}
.quickPayWrapper > .quickHeader > li > img{ height: 56px; display: block; width: auto; object-fit: cover;}
.quickPayWrapper > .quickHeader > li > h1{ width: 100%; text-align: right; font: 400 20px 'sf_ui_textsemibold', sans-serif; color: #2C54C1; letter-spacing: -.25px;}
.quickPayWrapper > .quicksearchAdm{ width: 100%; display: flex; flex-flow: row nowrap; align-items: center; padding:24px 32px; box-sizing: border-box;}
.quickPayWrapper > .quicksearchAdm > label{ width: auto; display: inline-block; text-align: left; font: 400 18px/42px 'sf_ui_textmedium', sans-serif; color: #000;}
.quickPayWrapper > .quicksearchAdm > input[type=text]{ display: inline-block; height: 42px; width: 230px; padding: 6px; box-sizing: border-box; font: 400 16px 'sf_ui_textmedium', sans-serif; color: #000; border: 1px solid #d0d0d0; border-radius: 4px; margin: 0 5px 0 10px;}
.quickPayWrapper > .quicksearchAdm > input[type=submit]{border:none; cursor: pointer; display: inline-block; height: 42px; width:auto; border-radius: 4px; padding: 0 24px; font: 400 16px 'sf_ui_textmedium', sans-serif; color: #fff; background-color: #3E69DF; appearance: none; -moz-appearance: none; -webkit-appearance: none;}
.quickPayWrapper > .quicksearchAdm > input[type=submit]:hover{ background-color: #2949A2;}
.quickPayWrapper > .quicksearchAdm > input[type=button]{border:none; cursor: pointer; display: inline-block; height: 42px; width:auto; border-radius: 4px; padding: 0 24px; font: 400 16px 'sf_ui_textmedium', sans-serif; color: #fff; background-color: #3E69DF; appearance: none; -moz-appearance: none; -webkit-appearance: none;}
.quickPayWrapper > .quicksearchAdm > input[type=button]:hover{ background-color: #2949A2;}
.quickPayWrapper > .quckNotvalid{  width: 100%; display: flex; flex-flow: column; align-items: center;  justify-content: center; margin-top: 16px; padding-bottom: 32px;}
.quickPayWrapper > .quckNotvalid > span{ display: block; width: 60px; height: 60px; border-radius: 50%; background: url(../icons/x.svg) no-repeat center #ff6d4a; background-size: 48px; margin-bottom: 16px;}
.quickPayWrapper > .quckNotvalid > p{ text-align: center; font: 400 14px 'sf_ui_textmedium', sans-serif; color: #ff6d4a;}
.quickPayWrapper > .quickDetail{ width: 100%; display: grid; padding:32px; box-sizing: border-box; grid-gap: 40px; grid-template-columns: repeat(2, 1fr);}
.quickPayWrapper > .quickDetail > li{width: 100%;}
.quickPayWrapper > .quickDetail > li > h1{ text-align: left; font: 400 24px 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.25px; }
.quickPayWrapper > .quickDetail > li > dl{ width: 100%; display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 12px; margin-top: 16px;}
.quickPayWrapper > .quickDetail > li > dl > dt{ width: 100%; display: grid; grid-template-columns: 150px auto; align-items: center;}
.quickPayWrapper > .quickDetail > li > dl > dt > small{ display: block; width: 100%; text-align: left; font: 400 14px 'sf_ui_textregular', sans-serif; color: #878787;}
.quickPayWrapper > .quickDetail > li > dl > dt > span{ display: block; width: 100%; text-align: left; font: 400 16px 'sf_ui_textmedium', sans-serif; color: #000;}
.quickPayWrapper > .quickDetail > li > ol{ width: 100%; display: grid; grid-template-columns: repeat(1, 1fr); grid-gap:5px; margin-top: 16px;}
.quickPayWrapper > .quickDetail > li > ol > li{ width: 100%; display: grid; grid-template-columns:auto 220px; align-items: center;}
.quickPayWrapper > .quickDetail > li > ol > li > select{height:36px !important; width: 100%; border-radius: 4px; border: 1px solid #e8e8e8; padding: 5px; margin:0 !important;  font:400 1.02rem 'sf_ui_textregular', sans-serif; color: #000; box-sizing: border-box; appearance:none; -moz-appearance:none; -ms-appearance:none; -webkit-appearance:none; -o-appearance:none; background: url(../icons/arrow_drop_down.svg) no-repeat 98% center; padding: 5px 30px 5px 5px; appearance: none; -moz-appearance: none; -webkit-appearance: none; -ms-appearance:none; -o-appearance:none;}
.quickPayWrapper > .quickDetail > li > ol > li > input[type=text]{ height: 36px; width: 100%; border-radius: 4px; border: 1px solid #e8e8e8; padding: 5px 8px;  font:400 1.02rem 'sf_ui_textmedium', sans-serif; color: #000; box-sizing: border-box; text-align: right;}
.quickPayWrapper > .quickDetail > li > ol > li > .qSep{ height: 1px; width: 100%; background-color: #d0d0d0; margin: 24px 0 16px 0;}
.quickPayWrapper > .quickDetail > li > ol > li > small{ display: block; width: 100%; text-align: left; font: 400 18px 'sf_ui_textmedium', sans-serif; color: #000;}
.quickPayWrapper > .quickDetail > li > ol > li > span{ display: block; width: 100%; text-align: left; font: 400 22px 'sf_ui_textsemibold', sans-serif; color: #FF1E1E; text-align: right;}
.quickPayWrapper > .quickSPay{ width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 32px;}
.quickPayWrapper > .quickSPay > input[type=submit]{border:none; cursor: pointer; display: inline-block; height: 60px; width:200px; border-radius: 4px; font: 400 16px 'sf_ui_textmedium', sans-serif; color: #fff; background-color: #0DAA41; appearance: none; -moz-appearance: none; -webkit-appearance: none;}
.quickPayWrapper > .quickSPay > input[type=submit]:hover{ background-color: #047B2C;}
.quickPayWrapper > .quickSPay > input[type=button]{border:none; cursor: pointer; display: inline-block; height: 60px; width:200px; border-radius: 4px; font: 400 16px 'sf_ui_textmedium', sans-serif; color: #fff; background-color: #0DAA41; appearance: none; -moz-appearance: none; -webkit-appearance: none;}
.quickPayWrapper > .quickSPay > input[type=button]:hover{ background-color: #047B2C;}
.quickPayWrapper > .qPower{ width: 100%; display: flex; flex-flow: row nowrap; justify-content: flex-end; padding:16px 32px 32px 32px; box-sizing: border-box;}
.quickPayWrapper > .qPower > img{ display: block; width: 140px;}
.select_announce  .student-searchsms{ height: auto; width: 100%; display: grid; grid-gap:16px; grid-template-columns:16% 16% 16% 16% 16%; margin-top: 24px; align-items:flex-start;}
.select_announce  .student-searchsms > li{ height: auto; width: 100%;}
.select_announce  .student-searchsms > li > label{ text-align: left; display: block; font-size:1rem; color: #878787;margin-bottom:8px;}
.select_announce  .student-searchsms > li > select{ width: 100%; display: block; margin-top: 8px;}
.select_announce  .student-searchsms > li > .erromsg{ height: 18px; width: 100%; display: inline-block; text-align: left; background: url(../icons/error_msg.svg) no-repeat left center; background-size: 18px; padding-left: 26px; font-size:1rem; color:#f00; margin-top: 4px;}
.select_announce  .student-searchsms > li > input[type=submit]{ display: block; height: 32px; width: 100%; border-radius: 4px; margin-top: 25px;
	font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #fff; text-align: center; background: #0c75ed; border: none; cursor: pointer; appearance:none; -moz-appearance:none; -o-appearance:none; -ms-appearance:none; -webkit-appearance:none;}
.select_announce  .student-searchsms > li > input[type=submit]:hover{ background: #0b66ce; box-shadow: 0 8px 16px rgba(0,0,0,.2);}

.select_announce  .student-searchsms > li > input[type=text]{ width: 100%; display: block; margin-top: 8px; height: 32px; border-radius: 4px; font: 400 1em 'sf_ui_textmedium', sans-serif; color: #202020; padding: 8px; border: 1px solid #ddd; box-sizing: border-box;}

.errAnnounce{ background: url(../icons/error_msg.svg) no-repeat left 2px center; background-size:18px; height:auto; width: 100%; display:block !important; text-align:left;color:red;font:400 12px/18px 'sf_ui_textregular', sans-serif; margin-top:4px;padding-left:24px;box-sizing:border-box }

@media (max-width:768px){
	.quickPayWrapper > .quickDetail{ grid-template-columns: repeat(1, 1fr);}
}

@media (max-width:560px){
	.quickPayWrapper > .quicksearchAdm{ flex-flow: row wrap;}
	.quickPayWrapper > .quicksearchAdm > label{ width: 100%;}
	.quickPayWrapper > .quicksearchAdm > input[type=text]{ margin: 0 4px 0 0;}
	.quickPayWrapper > .quickDetail{ grid-template-columns: repeat(1, 1fr);}
}
@media (max-width:460px){
	.quickPayWrapper > .quickHeader{ grid-template-columns: repeat(1, 1fr); align-items: center; grid-gap: 16px;}
	.quickPayWrapper > .quickHeader > li > h1{ text-align: center;}
	.quickPayWrapper > .quicksearchAdm{ flex-flow: row wrap;}
	.quickPayWrapper > .quicksearchAdm > label{ width: 100%;}
	.quickPayWrapper > .quicksearchAdm > input[type=text]{ margin: 0 0 8px 0; width: 100%;}
	.quickPayWrapper > .quicksearchAdm > input[type=submit]{width: 100%;}
	.quickPayWrapper > .quickDetail{ grid-template-columns: repeat(1, 1fr);}

	.quickPayWrapper > .quickDetail > li > dl > dt{ grid-template-columns: repeat(1, 1fr); grid-gap: 4px;}
	.quickPayWrapper > .quickDetail > li > ol{ grid-gap: 16px;}
	.quickPayWrapper > .quickDetail > li > ol > li{ grid-template-columns: repeat(1, 1fr); grid-gap: 4px;}
	.quickPayWrapper > .quickDetail > li > ol > li > .qSep:last-child{ display: none;}
	.quickPayWrapper > .quickDetail > li > ol > li:last-child{grid-template-columns: auto 150px}

	.quickPayWrapper > .quickDetail > li > ol > li > small{ font: 400 16px 'sf_ui_textmedium', sans-serif;}
    .quickPayWrapper > .quickDetail > li > ol > li > span{font: 400 18px 'sf_ui_textsemibold', sans-serif;}
}