@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;}
select{ display: none;}
.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{ padding:1em; 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 > .employee-search{ height: auto; width: 100%; display: grid; grid-gap:16px; grid-template-columns:16% 16% 16% 8%; margin-top: 24px; align-items:flex-end;}
.select_emp > .employee-search > li{ height: auto; width: 100%;}
.select_emp > .employee-search > li > label{ text-align: left; display: block; font-size:1rem; color: #878787;}
.select_emp > .employee-search > li > select{ width: 100%; display: block; margin-top: 8px;}
.select_emp > .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 > .employee-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;}
.select_emp > .employee-search > li > input[type=button]:hover{ background: #0b66ce; box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.select_emp > .employee_search_results{ height: auto; width: 100%; margin-top: 24px;}
.select_emp > .employee_search_results > .message{ height: auto; width: 100%; margin-top: 40px;}
.select_emp > .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_emp > .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_emp > .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_emp > .employee_search_results > .message > .textcount > label{ display: inline-block; color: #878787;}
.select_emp > .employee_search_results > .message > .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;}

.select_emp > .employee_search_results > .employee_table{ height: auto; width: 100%;}
.select_emp > .employee_search_results > .employee_table > table{ height: auto; width: 100%; border-collapse: collapse; border:none;}
.select_emp > .employee_search_results > .employee_table > table tbody{ height: auto; width: 100%; display: grid; grid-gap:16px; grid-template-columns:repeat(4, 1fr); background: #fff;}
.select_emp > .employee_search_results > .employee_table > table tbody tr{ width: 100%; height: auto;}
.select_emp > .employee_search_results > .employee_table > table tbody tr td{ height: auto; width: 100%; position: relative; display: block;}
.select_emp > .employee_search_results > .employee_table > table tbody tr td > input[type="checkbox"]{	position: absolute; height: 100%; width: 100%; display: block; cursor: pointer; opacity: 0; z-index:1;}
.select_emp > .employee_search_results > .employee_table > table tbody tr td > input[type="checkbox"]:checked ~ .employee{ border-color:#3ab870;} 
.select_emp > .employee_search_results > .employee_table > table tbody tr td > input[type="checkbox"]:checked ~ .employee > small{
	background-color: #3ab870;}
.select_emp > .employee_search_results > .employee_table > table tbody tr td > .employee { border: 1px solid #e4e4e4; padding:16px; 
	box-sizing: border-box; position:relative; border-radius: 4px; background: #fff; }
.select_emp > .employee_search_results > .employee_table > 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 > .employee_search_results > .employee_table > table tbody tr td > .employee > ul{ height: auto; width: 100%; display: grid; grid-gap:16px; grid-template-columns:48px auto;}
.select_emp > .employee_search_results > .employee_table > table tbody tr td > .employee > ul > li{ height:auto; width: 100%;}
.select_emp > .employee_search_results > .employee_table > table tbody tr td > .employee > ul > li > img{ display: block; width: 100%;
	object-fit: cover; border-radius: 4px;}
.select_emp > .employee_search_results > .employee_table > 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_emp > .employee_search_results > .employee_table > 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 > .employee_search_results > .employee_table > 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 > .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_emp > .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_emp > .employee_search_results > .message > .sendbuttns > input:hover{ box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.select_emp > .employee_search_results > .message > .sendbuttns > input.push{ background: #fff !important; color: #3ab870 !important;}
.select_emp > .employee_search_results > .message > .sendbuttns > input.push:hover{ background: #3ab870 !important; color: #fff !important;}

/******** 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 > .message{ height: auto; width: 100%; margin-top: 40px;}
.select_class > .message > label{ display: block; width: 100%; text-align: left; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #202020; letter-spacing: -.25px;}
.select_class > .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_class > .message > .textcount{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; margin-top: 8px;}
.select_class > .message > .textcount > label{ display: inline-block; color: #878787;}
.select_class > .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_class > .message > .sendbuttns{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; margin-top: 16px;}
.select_class > .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_class > .message > .sendbuttns > input:hover{ box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.select_class > .message > .sendbuttns > input.push{ background: #fff !important; color: #3ab870 !important;}
.select_class > .message > .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-top: 24px; 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: 30px !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 > .message > 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 > .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;}
.send_to_many > .message > .textcount{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; margin-top: 8px;}
.send_to_many > .message > .textcount > label{ display: inline-block; color: #878787;}
.send_to_many > .message > .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 > .message > .sendbuttns{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; margin-top: 16px;}
.send_to_many > .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;}
.send_to_many > .message > .sendbuttns > input:hover{ box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.send_to_many > .message > .sendbuttns > input.push{ background: #fff !important; color: #3ab870 !important;}
.send_to_many > .message > .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 > .heading{ height: auto; width: 100%; display: grid; grid-template-columns:auto 250px; align-items: center;}
.communication_dash > .chatsandnotifications > .heading > li{ height: auto; width: 100%;}
.communication_dash > .chatsandnotifications > .heading > li > h1{ text-align: left; font: 400 1.25rem 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.25px; margin: 0;}
.communication_dash > .chatsandnotifications > .heading > li > .period{ height: auto; width: 100%; display: flex; flex-flow: row nowrap;
	align-items: center; justify-content: flex-end;}
.communication_dash > .chatsandnotifications > .heading > li > .period > label{ display: block; text-align: left; font-size:1rem; color: #575757; margin-right: 16px;}
.communication_dash > .chatsandnotifications > .heading > 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;}
.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;}
.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=button]{ 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=button]:hover{ background: #0b66ce; box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.sendBox > .sendedSMS{ height: auto; width: 100%; margin-top: 40px;}
.sendBox > .sendedSMS > h2{ text-align: left; font: 400 1.5em 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.25px; margin: 0;}
.sendBox > .sendedSMS > table{ height: auto; width: 100%; border-collapse: collapse; margin-top: 24px;}
.sendBox > .sendedSMS > table th{ height: auto; width:auto; padding: 8px; text-align: left; font-size:1rem; color: #575757; border: 1px solid #ddd; background: #eee;}
.sendBox > .sendedSMS > table th:first-child{ text-align: center;}
.sendBox > .sendedSMS > table td{ height: auto; width:auto; padding: 8px; text-align: left; font-size:1rem; color: #575757; border: 1px solid #ddd;}
.sendBox > .sendedSMS > table td:first-child{ text-align: center;}

/******** 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=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;}
.addGroup > .searchGroup > li > input[type=button]:hover{ background: #0b66ce; box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.addGroup > .addStudents{ height: auto; width: 100%; margin-top: 40px;}
.addGroup > .addStudents > ul{height: auto; width: 100%; display: grid; grid-gap:32px; grid-template-columns:repeat(2, 1fr);}
.addGroup > .addStudents > ul > li{ height: auto; width: 100%;}
.addGroup > .addStudents > ul > li > h2{ text-align: left; font: 400 1.5rem 'sf_ui_textsemibold', sans-serif; color: #000; letter-spacing: -.25px;
	margin: 0;}
.addGroup > .addStudents > ul > li > table{ height: auto; width: 100%; border-collapse: collapse; margin-top: 24px;}
.addGroup > .addStudents > ul > li > table > tbody{ height: auto; width: 100%; display: grid; grid-gap:8px; grid-template-columns:repeat(2, 1fr);}
.addGroup > .addStudents > ul > li > table > tbody > tr{ height: auto; width: 100%;}
.addGroup > .addStudents > ul > li > table > tbody > tr > td{ display: block; height: auto; width: 100%; position: relative;}
.addGroup > .addStudents > ul > li > table > tbody > tr > td > input[type="checkbox"]{	position: absolute; height: 100%; width: 100%; display: block; cursor: pointer; opacity: 0; z-index:1;}
.addGroup > .addStudents > ul > li > table > tbody > tr > td > input[type="checkbox"]:checked ~ .addSt{ border-color:#3ab870; background: #f3fff8;} 
.addGroup > .addStudents > ul > li > table > tbody > tr > td> input[type="checkbox"]:checked ~ .small{
	background-color: #3ab870;}
.addGroup > .addStudents > ul > li > table > tbody > tr > td > .addSt { position:relative; display: grid; grid-gap:8px; grid-template-columns:56px auto; padding:8px 50px 8px 8px; box-sizing: border-box; border: 1px solid #e4e4e4; border-radius: 4px; background: #fafafe; }
.addGroup > .addStudents > ul > li > table > tbody > tr > td > .addSt > li{ height: auto; width: 100%; }
.addGroup > .addStudents > ul > li > table > tbody > tr > td > .addSt > li > img{ display: block; height: 56px; width: 100%; border-radius: 4px;}
.addGroup > .addStudents > ul > li > 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 > .addStudents > ul > li > table > tbody > tr > td > .addSt > li > p{ text-align: left; font: 400 .975rem 'sf_ui_textregular', sans-serif; color: #878787; margin: 0; display: flex; flex-flow: row nowrap; align-items: center;}
.addGroup > .addStudents > ul > li > table > tbody > tr > td > .addSt > li > p > span{ display: inline-block; color: #202020; margin-left: 5px;}
.addGroup > .addStudents > ul > li > table > tbody > tr > td > .small{ display: block; height: 32px; width: 32px; 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 > .addStudents > ul > li > table > tbody > tr > td > .addSt > p{ text-align: left; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #000; margin: 0;}
.addGroup > .addStudents > ul > li > table > tbody > tr > td > input[type="checkbox"]:checked ~ .removeSt{ border-color:#e25a5a; background: #fff5f5;} 
.addGroup > .addStudents > ul > li > table > tbody > tr > td> input[type="checkbox"]:checked ~ .smallremove{
	background-color: #e25a5a;}
.addGroup > .addStudents > ul > li > table > tbody > tr > td > .removeSt { position:relative; display: grid; grid-gap:8px; grid-template-columns:56px auto; padding:8px 50px 8px 8px; box-sizing: border-box; border: 1px solid #e4e4e4; border-radius: 4px; background: #fafafe; }
.addGroup > .addStudents > ul > li > table > tbody > tr > td > .removeSt > li{ height: auto; width: 100%; }
.addGroup > .addStudents > ul > li > table > tbody > tr > td > .removeSt > li > img{ display: block; height: 56px; width: 100%; border-radius: 4px;}
.addGroup > .addStudents > ul > li > 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 > .addStudents > ul > li > table > tbody > tr > td > .removeSt > li > p{ text-align: left; font: 400 .975rem 'sf_ui_textregular', sans-serif; color: #878787; margin: 0; display: flex; flex-flow: row nowrap; align-items: center;}
.addGroup > .addStudents > ul > li > table > tbody > tr > td > .removeSt > li > p > span{ display: inline-block; color: #202020; margin-left: 5px;}
.addGroup > .addStudents > ul > li > table > tbody > tr > td > .smallremove{ display: block; height: 32px; width: 32px; 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 > .addStudents > ul > li > table > tbody > tr > td > .removeSt > p{ text-align: left; font: 400 1rem 'sf_ui_textmedium', sans-serif; color: #000; margin: 0;}
.addGroup > .groupMSG{ height: auto; width: 100%; margin-top: 40px;}
.addGroup > .groupMSG > label{ display: block; width: 100%; text-align: left; font: 400 1.25rem 'sf_ui_textmedium', sans-serif; color: #202020; letter-spacing: -.25px;}
.addGroup > .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 > .groupMSG > .textcount{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; margin-top: 8px;}
.addGroup > .groupMSG > .textcount > label{ display: inline-block; color: #878787;}
.addGroup > .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 > .groupMSG > .sendbuttns{ height: auto; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; margin-top: 16px;}
.addGroup > .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 > .groupMSG > .sendbuttns > input:hover{ box-shadow: 0 8px 16px rgba(0,0,0,.2);}
.addGroup > .groupMSG > .sendbuttns > input.push{ background: #fff !important; color: #3ab870 !important;}
.addGroup > .groupMSG > .sendbuttns > input.push:hover{ background: #3ab870 !important; color: #fff !important;}

/******** 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;}

@media screen and (max-width:1680px) {
    .birthday > .bdaystudents{width:63%;}
		.birthday > .bdaystudents > .studentinfo{ width:32%;}
		.birthday > .bdayselected{ width: 35%;}
	}
@media screen and (max-width:1440px){}
@media screen and (max-width:1368px){
	html, body{ font-size: 12px !important;}
	.communication_dash{ grid-template-columns:270px auto;}
}
@media screen and (max-width:1280px){
	html, body{ font-size: 12px !important;}
	.communication_dash{ grid-template-columns:270px auto;}
	.communication_dash > .chatsandnotifications > .messages_n_announcements{ grid-template-columns:100%;}
}
@media screen and (max-width:1024px){
	html, body{ font-size: 12px !important;}
	.communication_dash{ grid-template-columns:270px auto;}
	.communication_dash > .chatsandnotifications > .messages_n_announcements{ grid-template-columns:100%;}
}
@media screen and (max-width:768px){
	html, body{ font-size: 12px !important;}
	.communication_dash{ grid-template-columns:270px auto;}
	.communication_dash > .chatsandnotifications > .messages_n_announcements{ grid-template-columns:100%;}
	.communication_dash > .chatsandnotifications > .heading{grid-template-columns:100%; grid-gap:1em;}
}
@media screen and (max-width:560px){
	html, body{ font-size: 12px !important;}
	.communication_dash{ grid-template-columns:100%;}
	.communication_dash > .chatsandnotifications > .messages_n_announcements{ grid-template-columns:100%;}
}
@media screen and (max-width:480px){
	html, body{ font-size: 12px !important;}
	.communication_dash{ grid-template-columns:100%;}
	.communication_dash > .chatsandnotifications > .messages_n_announcements{ grid-template-columns:100%;}
}

/************************************************************************************************************************
**************************************************MEDIA QUERIES *********************************************************
***********************************************************************************************************************
@media (max-width:1600px){
	.userandsession > li:first-child, .userandsession > li > b{ display: none;}
	.userandsession > li > span{ height: 32px; width: 32px; margin-right: 5px;}
	.userandsession > li{ margin-left: 5px;}	
	.select_emp > .employee_search_results > .employee_table > table tbody{ grid-template-columns:repeat(3, 1fr);}
	.select_emp > .employee-search, .send_to_many > .send-search{ grid-template-columns:repeat(4, 1fr);}
	.select_class > .class_table > table tbody{ grid-template-columns:repeat(4, 1fr);}
}

@media (max-width:1280px){
	.userandsession > li:first-child, .userandsession > li > b{ display: none;}
	.userandsession > li > span{ height: 32px; width: 32px; margin-right: 5px;}
	.userandsession > li{ margin-left: 5px;}	
	.select_emp > .employee-search, .select_emp > .employee_search_results > .employee_table > table tbody, .send_to_many > .send-search{ grid-template-columns:repeat(2, 1fr);}
	.select_class > .class_table > table tbody{ grid-template-columns:repeat(3, 1fr);}
	
	.communication_dash > .chatsandnotifications > .messages_n_announcements, .communication_dash > .chatsandnotifications > .heading{ grid-template-columns:100%;}	
	.communication_dash > .chatsandnotifications > .heading > li > .period{ justify-content: flex-start; margin-top: 8px;}
}

@media (max-width:1024px){
	.page-content{ padding: 15px;}
	.userandsession > li:first-child, .userandsession > li > b{ display: none;}
	.userandsession > li > span{ height: 32px; width: 32px; margin-right: 5px;}
	.userandsession > li{ margin-left: 5px;}	
	.select_emp > .employee-search, .select_emp > .employee_search_results > .employee_table > table tbody, .send_to_many > .send-search
	{ grid-template-columns:repeat(2, 1fr);}
	.select_class > .class_table > table tbody{ grid-template-columns:repeat(3, 1fr);}
	
	.communication_dash > .chatsandnotifications > .messages_n_announcements, .communication_dash > .chatsandnotifications > .heading{ grid-template-columns:100%;}	
	.communication_dash > .chatsandnotifications > .heading > li > .period{ justify-content: flex-start; margin-top: 8px;}
}

@media (max-width:768px){
	.page-content{ padding: 15px;}
	.userandsession > li:first-child, .userandsession > li > b, .datetime{ display: none;}
	.userandsession > li > span{ height: 32px; width: 32px; margin-right: 5px;}
	.userandsession > li{ margin-left: 5px;}	
	.select_emp > .employee-search, .select_emp > .employee_search_results > .employee_table > table tbody, .send_to_many > .send-search
	{ grid-template-columns:repeat(2, 1fr);}
	.select_class > .class_table > table tbody{ grid-template-columns:repeat(2, 1fr);}
	
	.communication_dash{ grid-template-columns:100%;}
	.communication_dash > .chatsandnotifications{ border: none; margin-top: 32px;}
	.communication_dash > .chatsandnotifications > .messages_n_announcements, .communication_dash > .chatsandnotifications > .messages_n_announcements > li > dl, .communication_dash > .chatsandnotifications > .heading{ grid-template-columns:100%;}
	.communication_dash > .chatsandnotifications > .messages_n_announcements > li > dl > dt, .communication_dash > .chatsandnotifications > .messages_n_announcements > li > dl > dt:last-child{ justify-content: center; }
	.communication_dash > .chatsandnotifications > .messages_n_announcements > li > dl > dt:last-child { padding-top: 8px;}
	.communication_dash > .chatsandnotifications > .heading > li > .period{ justify-content: flex-start; margin-top: 8px;}
}

@media (max-width:560px){
	.page-content{ padding: 15px;}
	.userandsession > li:first-child, .userandsession > li > b, .datetime{ display: none;}
	.userandsession > li > span{ height: 32px; width: 32px; margin-right: 5px;}
	.userandsession > li{ margin-left: 5px;}	
	.select_emp > .employee-search, .select_emp > .employee_search_results > .employee_table > table tbody{ grid-template-columns:100%;}
	.select_class > .class_table > table tbody, .send_to_many > .send-search{ grid-template-columns:repeat(1, 1fr);}
	.select_emp > .employee_search_results > .message > .sendbuttns, .select_class > .message > .sendbuttns, .send_to_many > .message > .sendbuttns{ flex-flow: column;}
	.select_emp > .employee_search_results > .message > .sendbuttns > input, .select_class > .message > .sendbuttns > input, .send_to_many > .message > .sendbuttns > input{ margin: 8px 0; width: 100%;}
	.communication_dash{ grid-template-columns:100%;}
	.communication_dash > .chatsandnotifications{ border: none; margin-top: 32px;}
	.communication_dash > .chatsandnotifications > .messages_n_announcements, .communication_dash > .chatsandnotifications > .messages_n_announcements > li > dl, .communication_dash > .chatsandnotifications > .heading{ grid-template-columns:100%;}
	.communication_dash > .chatsandnotifications > .messages_n_announcements > li > dl > dt, .communication_dash > .chatsandnotifications > .messages_n_announcements > li > dl > dt:last-child{ justify-content: center; }
	.communication_dash > .chatsandnotifications > .messages_n_announcements > li > dl > dt:last-child { padding-top: 8px;}
	.communication_dash > .chatsandnotifications > .heading > li > .period{ justify-content: flex-start; margin-top: 8px;}
	
} */
/************* 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;}

@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;}
}