html {
  scroll-behavior: smooth;
}
body{padding:0;margin:0;font-family: 'Roboto', sans-serif;}

.fa-angle-double-down{
float: right;
}
ul{
  padding-left:20px;
}
.sidenav {
  height: 100%;
  width: 225px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}


input[type="file"] {
    display: block;
    height: auto !important;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 225px; /* Same as the width of the sidenav */
  font-size: 14px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

textarea{
  font-family: 'Roboto Slab', serif;
}


.container {
  max-width: 970px;
}

/*div[class*='col-'] {*/
/*  padding: 0 30px;*/
/*}*/

.wrap {
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}

a:focus,
a:hover,
a:active {
  outline: 0;
  text-decoration: none;
}

.panel {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #fff;
  background: none;
  box-shadow: none;
}

.panel:last-child {
  border-bottom: none;
}

.panel-group > .panel:first-child .panel-heading {
  border-radius: 4px 4px 0 0;
}

.panel-group .panel {
  border-radius: 0;
}

.panel-group .panel + .panel {
  margin-top: 0;
}

.panel-heading {
  background-color: #009688;
  border-radius: 0;
  border: none;
  color: #fff;
  padding: 0;
}

.panel-title a {
  display: block;
  color: #fff;
  padding: 15px;
  position: relative;
  font-size: 16px;
  font-weight: 400;
}

.panel-body {
  background: #fff;
}

.panel:last-child .panel-body {
  border-radius: 0 0 4px 4px;
}

.panel:last-child .panel-heading {
  border-radius: 0 0 4px 4px;
  transition: border-radius 0.3s linear 0.2s;
}

.panel:last-child .panel-heading.active {
  border-radius: 0;
  transition: border-radius linear 0s;
}
/* #bs-collapse icon scale option */

.panel-heading a:before {
  content: '\e146';
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  font-size: 24px;
  transition: all 0.5s;
  transform: scale(1);
}

.panel-heading.active a:before {
  content: ' ';
  transition: all 0.5s;
  transform: scale(0);
}

#bs-collapse .panel-heading a:after {
  content: ' ';
  font-size: 24px;
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  transform: scale(0);
  transition: all 0.5s;
}

#bs-collapse .panel-heading.active a:after {
  content: '\e909';
  transform: scale(1);
  transition: all 0.5s;
}
/* #accordion rotate icon option */

#accordion .panel-heading a:before {
  content: '\e316';
  font-size: 24px;
  position: absolute;
  font-family: 'Material Icons';
  right: 5px;
  top: 10px;
  transform: rotate(180deg);
  transition: all 0.5s;
}

#accordion .panel-heading.active a:before {
  transform: rotate(0deg);
  transition: all 0.5s;
}

input[type=text]{
  padding:10px;
  margin:10px;
  border:none;
  border-bottom:1px solid #818181;
}

.wwd_form{
  display: flex;
  flex-direction: column;
  width: 70%;
 margin:0 auto;
}


img{width:100%;}
    body{ font-family: 'Roboto', sans-serif;}
    #modal-1 {

    display: flex;
    flex-direction: column;
    padding: 10px;

}
/*srs*/
.heder-strp {
    background: #1e80ff;
    padding: 10px 0;
    margin-bottom: 20px;
}

.heder-strp img {
    width: 190px;
}
p.dvf.text-center {
    font-size: 20px;
    color: #143642;
    font-weight: 500;
}

.col {
    display: flex;
    flex-direction: column;
    align-items: center;
   
    width: 50%;
    margin: auto;
   
}

.col input {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
}
.shodow {
    /*box-shadow: 0 0 10px #b5b5b5;*/
   
    width: 80%;

    padding: 20px;
     margin: auto;
}
.shodow p {
    font-weight: 500;
}
.btnmt {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.btnmt input {
    width: 100px;
    background: #ffc107;
    border: 0;
    color: #143642;
    font-weight: 600;
    margin-left: 15px;
}

/*dashboard*/
.dssfg{
    background: none;
    color: #000;
    border: 0;
    display: flex;
    align-items: center;
}
span.sdfimg {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid;
    overflow: hidden;
    margin: auto;
        margin-right:10px;
}
span.sdfimg img {
    width: 100%;

}
.dssfg:focus{
    outline:none;
}
.dssfg:hover{
    color: #000 !important;
    background-color: transparent !important;
    border-color: transparent !important;
}
.asg45{
        display: flex;
    justify-content: flex-end;
}
.asg45 .dropdown-menu{
        right:0 !important;
        left:unset;
}
.asg45 .btn-primary.active,.asg45 .btn-primary:active, .asg45.open>.dropdown-toggle.btn-primary {
   color: #000 !important;
    background-color: transparent !important;
    border-color: transparent !important;
}
.backrt{
    background:#eee;
}
/*.col-3{*/
/*    width: 20%;*/
/*}*/
/*.col-9 {*/
   
/*    width: 80%;*/
    /*height: 133vh;*/
    /*overflow: scroll;*/

/*}*/
a.frgrp {
   display: block;
    margin-right: 20px;
    margin-bottom: 10px;
}

.regigrp img {
    width: 50px;
    margin-right: 20px;
}

a {
    color: #000;
}

.regigrp {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 200px;
    border: 0px solid;
    padding: 10px 20px;
    box-shadow: 0 14px 24px #bdbdbd3d;
    border-radius: 5px;
}

.reg_p p {width: 70%;margin: 0;}

.reg_p h3 {
    margin: 0;
    font-weight: 600;
}

.reg_p {
    height: 85px;
    position: relative;
    top: 6px;
        display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.bchgrt{
     box-shadow: 0 0 10px #b5b5b5;
    padding: 30px;
        background: #fff;

}
.grp-bck {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.actner {
    margin: 30px 0px;
    display: flex;
    align-items: flex-end;
}

.actner span {
    /*border-bottom: 2px solid #ddd;*/
    display: block;
    width: 100%;
    position: relative;
    top: -3px;
}
span.dtline:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: #ddd;
}
span.samey:after {
    content: "";
    position: absolute;
    width: 50%;
    height: 2px;
    background: #ddd;
    left: -10%;
}
.actner h4 {
    margin: 0;
    margin-right: 20px;
    color: #143642;
    width: 200px;
}
/*dashboard*/
/*from*/
#userFrom img {
    width: 100%;
}

a:hover, a:focus {
    color: #ffc107 !important;
    text-decoration: none !important;
}
.frmlca p {
    font-size: 18px;
}

.frmlca input[type="file"] {
    border: 2px solid #ddd;
    padding: 20px;
}

input[type="submit"] {
    border: 0 !important;
    width: 100px !important;
    padding: 10px;
    background: #ffc107;
    font-size: 15px;
    color: #143642;
    font-weight: 600;
    margin: 10px 0px;
    box-shadow: 0 0 10px #b5b5b5;
}
.frmlca input {
    border: 1px solid #b5b5b5;
    width: 50%;
    padding: 15px 5px;
}

.frmlca p {
    margin: 0;
}
.frmlca {
    margin: 15px 0;
}


.btsfg {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin:10px 0px;
}
.note-toolbar{
    position:relative!important;
}
.btsfg a {
    border: 1px solid #143642;
    display: block;
    width: 100px;
    padding: 9px;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    background: #143642;
    margin-left: 10px;
    color: #ffc107;
    text-decoration: none;
}
.lstimg{
    width:200px;
}
.frmlca select {
    width: 50%;
    padding: 15px 5px;
}
.frmlca .remove_button img {
    width: 30px;
}
.fld .add_button img {
    width: 30px;
}
.fld {
    width: 50px;
    height: 50px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.frmlca.afse .remove_button {
    width: 50px;
    height: 50px;
    display: flex;
    border: 1px solid #000;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    left: 55%;
    top: 0;
    transform: translateX(-50%);
}

.frmlca.afse {
    position: relative;
}
/*from*/
@media(max-width:750px){
    .shodow{
        width:100%;
    }
    .col{
        width:100%;
    }
    .col-3 {
    width: 100%;
}
.col-9 {
    width: 100%;
}
.regigrp img {
    width: 50px;
    margin-right: 0;
}
.regigrp {
    width: 250px;
    margin-bottom: 20px;
    flex-direction: column;
    text-align: center;
    height: 150px;
}
.reg_p {
    height: auto;
    position: relative;
    top: 6px;
    margin: 10px 0px;
        align-items: center;
}
a.frgrp {
    display: block;
    margin-right: 0px;
}
.reg_p p {
    width: 100%;
}
.actner {
    margin: 30px 0px;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.actner span{
    display:none;
}
.grp-bck{
       justify-content: center; 
}
#close {
    width: 100%;
    height: auto;
    position: relative;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    
   #close {
     width: 100%; 
     height: auto !important; 
     position: static !important; 
}
.regigrp{
    margin-bottom: 30px;
}
}
.croppie-container {
    width: 100%;
    height: 100%;
}

.croppie-container .cr-image {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    max-height: none;
    max-width: none;
}

.croppie-container .cr-boundary {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.croppie-container .cr-viewport,
.croppie-container .cr-resizer {
    position: absolute;
    border: 2px solid #fff;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.croppie-container .cr-resizer {
  z-index: 2;
  box-shadow: none;
  pointer-events: none;
}

.croppie-container .cr-resizer-vertical,
.croppie-container .cr-resizer-horisontal {
  position: absolute;
  pointer-events: all;
}

.croppie-container .cr-resizer-vertical::after,
.croppie-container .cr-resizer-horisontal::after {
    display: block;
    position: absolute;
    box-sizing: border-box;
    border: 1px solid black;
    background: #fff;
    width: 10px;
    height: 10px;
    content: '';
}

.croppie-container .cr-resizer-vertical {
  bottom: -5px;
  cursor: row-resize;
  width: 100%;
  height: 10px;
}

.croppie-container .cr-resizer-vertical::after {
    left: 50%;
    margin-left: -5px;
}

.croppie-container .cr-resizer-horisontal {
  right: -5px;
  cursor: col-resize;
  width: 10px;
  height: 100%;
}

.croppie-container .cr-resizer-horisontal::after {
    top: 50%;
    margin-top: -5px;
}

.croppie-container .cr-original-image {
    display: none;
}

.croppie-container .cr-vp-circle {
    border-radius: 50%;
}

.croppie-container .cr-overlay {
    z-index: 1;
    position: absolute;
    cursor: move;
    touch-action: none;
}

.croppie-container .cr-slider-wrap {
    width: 75%;
    margin: 15px auto;
    text-align: center;
}

.croppie-result {
    position: relative;
    overflow: hidden;
}

.croppie-result img {
    position: absolute;
}

.croppie-container .cr-image,
.croppie-container .cr-overlay,
.croppie-container .cr-viewport {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

/*************************************/
/***** STYLING RANGE INPUT ***********/
/*************************************/
/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
/*************************************/

.cr-slider {
    -webkit-appearance: none;
/*removes default webkit styles*/
	/*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
    width: 300px;
/*required for proper track sizing in FF*/
    max-width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: transparent;
}

.cr-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}

.cr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}

.cr-slider:focus {
    outline: none;
}
/*
.cr-slider:focus::-webkit-slider-runnable-track {
background: #ccc;
}
*/

.cr-slider::-moz-range-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border: 0;
    border-radius: 3px;
}

.cr-slider::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ddd;
    margin-top: -6px;
}

/*hide the outline behind the border*/
.cr-slider:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
}

.cr-slider::-ms-track {
    width: 100%;
    height: 5px;
    background: transparent;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
	border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
	border-width: 6px 0;
	color: transparent;/*remove default tick marks*/
}
.cr-slider::-ms-fill-lower {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}
.cr-slider::-ms-fill-upper {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}
.cr-slider::-ms-thumb {
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #ddd;
	margin-top:1px;
}
.cr-slider:focus::-ms-fill-lower {
	background: rgba(0, 0, 0, 0.5);
}
.cr-slider:focus::-ms-fill-upper {
	background: rgba(0, 0, 0, 0.5);
}
/*******************************************/

/***********************************/
/* Rotation Tools */
/***********************************/
.cr-rotate-controls {
	position: absolute;
	bottom: 5px;
	left: 5px;
	z-index: 1;
}
.cr-rotate-controls button {
	border: 0;
	background: none;
}
.cr-rotate-controls i:before {
	display: inline-block;
	font-style: normal;
	font-weight: 900;
	font-size: 22px;
}
.cr-rotate-l i:before {
	content: '↺';
}
.cr-rotate-r i:before {
	content: '↻';
}
/*srs*/
#main {
    padding: 15px;
    margin: 10px;
    box-shadow: 0 8px 50px 0 rgba(0,0,0,0.2);
}

/*form*/
form#modalEdit input {
    width: 80%;
    margin: 10px;
    padding: 10px;
}
form#modalEdit select {
    width: 80%;
    margin: 10px;
    padding: 10px;
}
form#modalEdit input[type=checkbox], input[type=radio] {
    width: 25%;
    margin: 10px;
    padding: 10px;
}
form#modalEdit h4 {
    text-align: center;
    position: relative;
    padding-bottom: 10px;
}

form#modalEdit h4:before {
    position: absolute;
    content: "";
    width: 50px;
    height: 5px;
    background: #1e80ff;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    z-index: 1;
    border-radius: 30px;
}

form#modalEdit h4:after {
    position: absolute;
    content: "";
    width: 150px;
    height: 2px;
    background: #ffc107;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    z-index: 0;
}

div#editModal .modal-header {
    display: none;
}

div#editModal .modal-footer button {
    background: red;
    color: #fff;
}
/*2*/
form#modalAdd input {
    width: 80%;
    margin: 10px;
    padding: 10px;
}

form#modalAdd h4 {
    text-align: center;
    position: relative;
    padding-bottom: 10px;
}
form#modalAdd select {
    width: 80%;
    margin: 10px;
    padding: 10px;
}

form#modalAdd input[type=checkbox], input[type=radio] {
    width: 25%;
    margin: 10px;
    padding: 10px;
}
form#modalAdd h4:before {
    position: absolute;
    content: "";
    width: 50px;
    height: 5px;
    background: #1e80ff;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    z-index: 1;
    border-radius: 30px;
}

form#modalAdd h4:after {
    position: absolute;
    content: "";
    width: 150px;
    height: 2px;
    background: #ffc107;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    z-index: 0;
}

div#newModal .modal-header {
    display: none;
}

div#newModal .modal-footer button {
    background: red;
    color: #fff;
}
/*form*/
/*srs*/
.frmlca.derr {
    border-bottom: 2px solid #ddd;
    padding-bottom: 20px;
}
/*srs*/
/* saravana */
.sadw {
    background: #478ca4;
    border-left: 5px solid #143642;
        color: #ffc107;
}
/* saravana end */