@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,300,500,700&subset=latin-ext,latin);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, p, blockquote, pre, a, abbr, acronym, address, 
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
 center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, 
 td {margin:0; padding:0; border:0; outline:0;  vertical-align:baseline; background:transparent;} 
 body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before,
  q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} 
  table{border-collapse:collapse; border-spacing:0;}
body {
/* background-color: #323945; #c5dfe7-blueish #f0f7e4-creamuish*/
   background-color: #f0f7e4;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  font-size: 15px;
    -webkit-font-smoothing: antialiased;

}

/* Attachment of tasks and assignment styling */
.gallery_container { margin-left:0.5em;width:95%;padding: 0.7em;background:#DEE1E1;border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;border-top-right-radius: 15px;   display: flex;   flex-wrap: wrap;
  justify-content: flex-start;  align-items: flex-start;

}
.gallery_container div { width: 150px; padding:0.5em; max-height: 300px;}
.gallery_container img {
  max-width: 100%;
  vertical-align: middle;
  height: auto;
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.gallery_container :hover img {
  opacity: .5;
}

@media only screen and (max-width: 700px) {
.gallery_container { width:85% }  
.gallery_container div { width: 97%; padding:0.4em; max-height: 500px;}
 .gallery_container  img {
 width:100%;

}
}
@media only screen and (max-width: 500px) {
  .gallery_container { flex-direction: column;}

}
/* Attachment of tasks and assignment styling end */

:root {
  --success: #3fbd63c4;
  --success-md: #3fbd637c;
  --success-l: #3fbd632d;

  --danger: #ea4e2cc4;
  --danger-md: #ea4e2c7c;
  --danger-l: #ea4e2c2d;
}

/*font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;*/


.alert {
  background-color: #fff;
  padding: 15px;
  border-radius: 20px;
  box-shadow: 0 2px 5px #00000033;
  cursor: pointer;
  font-weight: 500;
  width:80%;
  overflow: hidden;
}

.i {
  color: #fff;
  border-radius: 50%;
  font-size: 20px;
  width: 37px;
  height: 37px;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.alert span {
  font-size: 18px;
  color: #5d6672 !important;
  line-height: 1.6;
  white-space: wrap;
}
.alert.success {
  border: 1px solid var(--success-md);
  background-color: var(--success-l);
}
.alert.success i {
  background-color: var(--success);
}

.alert.danger {
  border: 1px solid var(--danger-md);
  background-color: var(--danger-l);
}
.alert.danger i {
  background-color: var(--danger);
}

a:link {
  text-decoration: none!important;
  color: #000;
  }

.dash_header {
    background:#158484;
    padding: 0.7em;
    border-radius: 0px 10px 10px 0px;
    font-size: 14px;
    height: 14px;
    color:#fff;
    text-align: left;
      text-transform: uppercase;

}
   
.maincontent {
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
}
section { margin:0px; }
section p { line-height:2em; font-family:'Raleway light'; }
.mainboxcontent {
	max-width: 1700px;
	margin-left: auto;
	margin-right: auto;
}

@font-face {
  font-family: 'alegreya-sans-sc.regular';
  src: url('fonts/alegreya-sans-sc.regular.eot');
  src: url('fonts/alegreya-sans-sc.regular.woff2') format('woff2'),
       url('fonts/alegreya-sans-sc.regular.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-family: ubuntu,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,sans-serif;
  font-weight: 400;
  color: #151515;
  
}


h6 {
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 400;
	font-family: "Teko", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #DC6106;
	font-size: 20px;
}

 
/*op */

.header{
  box-sizing: border-box;
  padding: 2em 3em 7em;
  background: linear-gradient(to left,#ff2952,#ce1e3f);;
}

.separator{
  height: 125px;
  margin-top:calc(125px * -1);
  background-image: linear-gradient(to bottom right, transparent, transparent 50%, #fff 50%, #fff);
  /* Using transparent for top of the gradient allows for a background image on the header. Alternatively you can just use a solid color that matches the header color. */
}

.footer{
  background: #fff;
}

.footer p {
  margin: 0;
  font-size: 1.5em;
  padding: 2.5em ;
}



/*footer contact */
h1,[class*=heading-]{
    margin-top:0;
    margin-bottom:0;
    font-family:lato,Helvetica,Arial,sans-serif;
    font-weight:300;
    font-size: 420%;
    color:#fff;
}
.mainfooter_left { float:left;width:49%; }
.mainfooter_right { float:right;width:43%; }
@media  (max-width:700px){
.mainfooter_left,.mainfooter_right { width:100%; }
.mainfooter_right { padding-top: 2em;}
}



 .error { border-radius: 10px;background: #ff3d1f; padding: 1.2em;font-size:18px; width:85%; 
 /*border: #444 solid 1px;*/
  color: #ffffff; }
 
/* Top 4 Flex Boxes */

.flex_boxes {   display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;


}
.topbox:nth-of-type(4) .roomnumber_tab1{ width:100%; background:#10569B;}
.topbox:nth-of-type(1) .roomnumber_tab1{ width:100%; background:#000;}

.topbox {  width:18%; height: 150px; }

.topbox {
 border-radius: 12px;
 background-color:#fff;
padding:15px;
  margin-left: 10px;

box-shadow: rgba(0, 0, 0, 0.07) 0.95px 0.95px 1.3px;

  -webkit-transition: -webkit-transform .3s, box-shadow .3s;
    -moz-transition: -moz-transform .3s, box-shadow .3s;
    -o-transition: -o-transform .3s, box-shadow .3s;
    transition: transform .3s, box-shadow .3s
}
.topbox:hover {
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12)
}
/*.topbox:hover {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px)
}*/
.roomnumber_tab1 {
    width: 100%;
    bottom: 35px;
    left: 110px;
    margin-left:-1.7em;
    margin-top: -1.2em;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.1) 0px 1px 4px -1px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
    background-color: #900C3F;
    font-size: 16px;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 15px;
    font-family: "Asap", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media screen and (max-width: 1215px) {
.topbox{ 
    width:44%;
}

}



@media screen and (max-width: 870px) {
.roomnumber_tab1 { 
    width:100%;
}
.topbox{ 
    width:44%;
}


}

@media screen and (max-width: 770px) {
.roomnumber_tab1 { 
    width:100%;}

.topbox{ 
    width:85%;
    margin-left: 0px;
}
.topbox:nth-of-type(2) { width:39%; }
.topbox:nth-of-type(3) { width:39%; }
.topbox:nth-of-type(3) .roomnumber_tab1 { margin-right: -3em; }


 }

/* Top 4 Flex Boxes End */


/* Start Search Bar Styling */


.search {
  width: 80%;
  display: flex;

}

.searchTerm {
  width: 80%;
  border: 3px solid #900C3F;
  border-right: none;
  padding: 15px;
  height: 20px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #000; 
font-size: 20px;

/*  box-shadow: 0.25rem 0.25rem 0rem #f0b2a8; */

}
/*
.searchTerm:focus{
  color: #000;
    padding: 15px;
font-size: 20px;
}*/

.searchTerm:focus {
  background: #C2C4B3;
  border-color: #fff;
  color: #000;
  outline: none;

}


.searchButton {
  width: 60px;
  height: 56px;
  border: 1px solid #900C3F;
  background: #6C151E;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
 /* box-shadow: 0.25rem 0.25rem 0rem #f0b2a8; */


}



/* Container of Search Bar */
.wrap{
  width: 80%;
 
}
.search input::placeholder {
   color: #888;
}

@media screen and (max-width: 850px) {
  .wrap {
  width: 100%;
}
}

/* End Search Bar Styling */


/* Completed Tasks Styling Start */

.completed_tasks_con {
  /*background: #E1F6FB;*/width:44%;border-radius: 15px;
}

@media screen and (max-width: 1050px) {
.completed_tasks_con  { width: 98%; }
}

.box {  width:95%; height: 70px; }

.box {
 border-radius: 5px;
 background-color:#fff;
padding:15px 15px 15px;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
margin-top:0em;margin-left:0.3em;

}

.roomnumber_tab {
  width: 120px;
  bottom: 35px;
  left: 110px;
  margin-left:-1.7em;
    margin-top: -1.2em;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.1) 0px 1px 4px -1px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
  background-color: #EE6608;
  font-size: 16px;
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 3px;
  font-family: "Asap", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.eng_name1 {  
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.1) 0px 1px 4px -1px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
  background-color: #166199; color:#fff;
                    float:right;
                    width: 70px; 
                    height: 20px; 
                      padding: 12px 10px;
                       border-radius: 26px 132px 58px 108px;

                     margin-right:-1.5em;                   

         }
.posted_duration { float:right;margin-top:-1.5em; color: #900C3F; font-weight: bold; }

.insidebox_bar {
  width: 190px;
  background-color: #555;
  overflow: auto;
  border-radius: 0px 132px 58px 108px;

}

.insidebox_bar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.insidebox_bar a:hover {
  background-color: #900C3F;
}

.arrowpopup img:hover {
   animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
   transform: translate3d(0, 0, 0);
   backface-visibility: hidden;
   perspective: 1000px;
}
 @keyframes shake {
   10%, 90% {
     transform: translate3d(-1px, 0, 0);
  }
   20%, 80% {
     transform: translate3d(2px, 0, 0);
  }
   30%, 50%, 70% {
     transform: translate3d(-4px, 0, 0);
  }
   40%, 60% {
     transform: translate3d(4px, 0, 0);
  }
}

@media screen and (max-width: 870px) {
.roomnumber_tab { 
    width:30%;
}

}

@media screen and (max-width: 770px) {
.roomnumber_tab { 
    width:40%;
}
.box { width:90%; height: 70px;  }
}
.eng_name {  
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.1) 0px 1px 4px -1px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
  background-color: #166199; color:#fff;
                    float:right;
                    width: 80px; 
                    height: 10px; 
                    font-size: 14px;
                      padding: 10px 10px;
                       border-radius: 26px 132px 58px 108px;
                      margin-top: 0.8em;
                     margin-right:-1.5em;                   

         }
}
/*.arrowpopup {
position: relative;
display: inline-block;
cursor: pointer;
}
.arrowpopup .tooltiptext {
visibility: hidden;
width: 180px;
font-size: 13px;
line-height: 1.4em;
background-color: #856;
color: white;
text-align: center;
border-radius: 4px;
padding: 9px ;
position: absolute;
right: 37%; /*this moves tooltip *//*
margin-right: -25px; /* direction of tooltip message box */ /*
z-index: 2; 
margin-top: -1em;
}
.arrowpopup .tooltiptext::after {
/*content: "";*//*
position: absolute;
top: 100%;
left: 50%;

margin-left: -5px;
border-width: 5px;

border-style: solid;
border-color: #856 transparent transparent transparent;
}*
.arrowpopup .show {
visibility: visible;
}
*/
.arrowpopup {
position: relative;
display: inline-block;
cursor: pointer;
}
.arrowpopup .tooltiptext {
visibility: hidden;
width: 180px;
font-size: 13px;
line-height: 1.4em;
background-color: #856;
color: white;
text-align: center;
border-radius: 4px;
padding: 9px ;
position: absolute;
left: 37%; /*this moves tooltip */
margin-left: -25px; /* direction of tooltip message box */
z-index: 2;
margin-top: -1em;
}
.arrowpopup .tooltiptext::after {
/*content: "";*/
position: absolute;
top: 100%;
left: 50%;

margin-left: -5px;
border-width: 5px;

border-style: solid;
border-color: #856 transparent transparent transparent;
}
.arrowpopup .show {
visibility: visible;
}
/* Completed Tasks Styling End */

/* Assignments Main - Styling Start */

.assignments_pending_con {
  background: #fff;width:44%;border-radius: 15px;padding:1em;
}
@media screen and (max-width: 1050px) {
.assignments_pending_con  { width: 96%; }
}


.grid-container {
  display: grid;
  grid-template-columns: 85% 15%;

}
.grid-container p { padding:0.4em;}
#glow {
background-color: #ec8500;


  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
-webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
  }
  
@-webkit-keyframes glowing {
  0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -webkit-box-shadow: 0 0 20px #FF0000; }
  100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}

@-moz-keyframes glowing {
  0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -moz-box-shadow: 0 0 20px #FF0000; }
  100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; }
}

@-o-keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 20px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}

@keyframes glowing {
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; box-shadow: 0 0 20px #FF0000; }
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
}
.for_eng {padding:0.5em;margin-left:0.5em;margin-top: 0.2em;margin-bottom: 0.2em;background:#A11E0C;color:#fff;width:70%;border-radius: 0px 15px 0px 15px; }
.dottedbox { background: #FEFEEA;border:2px dashed #9C9C0E;margin-left:0.5em;margin-top:0.5em;margin-bottom:1em;width: 93%;border-radius:5px; }
.dottedbox_text {  line-height:1.7em; padding: 0.6em; margin-left: 1.2em; padding-bottom: -14em;}
.assignment_image { width:40px; margin-left:-1.1em;margin-bottom:-3.5em; }
.about_image { width:20px; }
.action_icon { width:60px; }
.underdiv_line {  border-bottom: 2px solid #07255F; }
.assignment_right_box { background-color:#D9EEE1;border-bottom: 2px solid #07255F; display: flex; align-items: center;justify-content: center; }
@media screen and (max-width: 770px) {
.for_eng { 
    width:60%;
}
.dottedbox { 
    margin-top:1em;
}
.dottedbox_text { }
}

/* Assignments Main - Styling END */

/* INBOX STYLING  START */

.displayroundonfeature { 
float: left;
margin-top: 0.3em;
padding-right: 0.5em;
}
.displayroundonfeature .pic{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    float: left;
    border: 2px solid rgba(255,255,255,0.3);
    display: inline-block;
    overflow: hidden;
    box-shadow:0 2px 6px rgba(0, 0, 0, 0.15);
   
}
.displayroundonfeature .pic img{
    width: 100%;
    height: auto;

}
.inbox_box { width:100%; background: #F7F8FB; height: 80px;border: solid 1px #E4E3E3;margin-top:0.4em;  border-radius: 0px 15px 15px 15px; }
.inbox_box:hover,.inbox_box_new_message:hover {  border-color: rgba(0, 0, 0, 1);  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1));  transition: border-color 0.9s ease; 
 } 
.inbox_box_new_message {  width:100%;background: #FCF3C5; height: 80px; border: solid 1px #E4E3E3;margin-top:0.4em; border-radius: 0px 15px 15px 15px; }
.inboxname_tag_newmessage {   box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.1) 0px 1px 4px -1px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
    background-color: #FF5733;width:300px;color:#000;background: #70C9E3;padding:2px;border-radius: 0px 5px 5px 0px; }
.inboxname_tag {   box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.1) 0px 1px 4px -1px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
    background-color: #FF5733; width:300px;color:#fff;background: #636304;padding:2px;border-radius: 0px 5px 5px 0px; }
.inboxbox_date { float:right;margin-right:-4em;color:#5A0805; }
.other_date { float:right; color:#5A0805; }

.inboxbox_message { color:#033722; }
.inboxbox_message  {
    text-overflow: ellipsis; /* will make [...] at the end */
    max-width: 620px; /* change to your preferences */
    white-space: nowrap; /* paragraph to one line */
   overflow:hidden; /* older browsers */
    margin-top:0.6em;padding-top:2px;
         font-size: 12px;

  
}
.inbox_small_subject {font-size:x-small;padding:1em;}
@media screen and (max-width: 690px) {
.inboxbox_message  {
    text-overflow: ellipsis; /* will make [...] at the end */
    max-width: 300px; /* change to your preferences */
    white-space: nowrap; /* paragraph to one line */
   overflow:hidden; /* older browsers */
    margin-top:0.6em;padding-top:2px;
         font-size: 12px;

  
}
/*.inboxbox_message {display:none;}
.inbox_box,.inbox_box_new_message {height:60px;}
.inbox_box span { padding-top:-2em; font-size: 12px; }*/
}

@media screen and (max-width: 380px) {
.inboxbox_date { display: none; }
}
@media screen and (min-width: 380px) {
.other_date { display: none; }
}
/* INBOX STYLING  END */