#img-body{
   background-image: url(https://scontent.fceb1-1.fna.fbcdn.net/v/t1.15752-9/38149412_2130923643847864_2625631718429687808_n.jpg?_nc_cat=111&_nc_ht=scontent.fceb1-1.fna&oh=cfec3832746f98d04fe7a10c8f1afcfa&oe=5CEE82B2);
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center;
}

body{
    background:#fff;
   /* background: rgba(18,89,155,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(18,89,155,1) 0%, rgba(18,89,155,1) 48%, rgba(16,70,132,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(18,89,155,1)), color-stop(48%, rgba(18,89,155,1)), color-stop(100%, rgba(16,70,132,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(18,89,155,1) 0%, rgba(18,89,155,1) 48%, rgba(16,70,132,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(18,89,155,1) 0%, rgba(18,89,155,1) 48%, rgba(16,70,132,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(18,89,155,1) 0%, rgba(18,89,155,1) 48%, rgba(16,70,132,1) 100%);
    background: radial-gradient(ellipse at center, rgba(18,89,155,1) 0%, rgba(18,89,155,1) 48%, rgba(16,70,132,1) 100%);*/
}

::-webkit-scrollbar {
  width: 10px;
  background:lightgray;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(146,210,70,1); 
  border-radius: 15px;
}

::-webkit-scrollbar-thumb {
  border-radius: 15px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
  background:#000000;
} 

/** Media For Login **/

@media (min-width: 224px) {

    .login-container{
       margin-top:20px;
       margin-bottom:100px;
    }
    .lp-left{
      background:url("../img/Login/LoginBGLeft2.jpg");
      background-size:cover;
      background-repeat: no-repeat;
      width:100%;
      height:600px;
      padding-top:180px;
      color:#ffffff;
      
    }
    .lp-right{
      background:url("../img/Login/LoginBGright.jpg");
      background-size:cover;
      background-repeat: no-repeat;
      width:100%;
      height:600px;
  }

  .cover-font-1{
    font-family: "Segoe UI"; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 600; line-height: 35px; 
    margin-top:-40px;
  }
  
  .cover-font-2{
    font-family: "Segoe UI"; font-size: 20px; font-style: normal; font-variant: normal; font-weight: 400; 
    margin-top:-20px;
  }

 }


@media (min-width: 768px) { 
      .login-container{
        margin-top:50px;
        margin-bottom:100px;
    }

      .lp-left{
        background:url("../img/Login/LoginBGLeft2.jpg");
        background-size:cover;
        background-repeat: no-repeat;
        width:100%;
        height:600px;
        padding-top:180px;
        color:#ffffff;
        
      }
      .lp-right{
        background:url("../img/Login/LoginBGright.jpg");
        background-size:cover;
        background-repeat: no-repeat;
        width:100%;
        height:600px;
    }

    .cover-font-1{
      font-family: "Segoe UI"; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 600; line-height: 35px; 
      margin-top:20px;
    }
    
    .cover-font-2{
      font-family: "Segoe UI"; font-size: 20px; font-style: normal; font-variant: normal; font-weight: 400; 
      margin-top:-20px;
    }
 }


@media (min-width: 992px) { 
      .login-container{
        margin-top:100px;
        width: 100%;
        height:400px;
    }

      .lp-left{
        background:url("../img/Login/LoginBGLeft2.jpg");
        background-size:cover;
        background-repeat: no-repeat;
        width:100%;
        height:600px;
        padding-top:180px;
        color:#ffffff;
        
      }
      .lp-right{
        background:url("../img/Login/LoginBGright.jpg");
        background-size:cover;
        background-repeat: no-repeat;
        width:100%;
        height:600px;
    }

    .cover-font-1{
      font-family: "Segoe UI"; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 600; line-height: 35px; 
      margin-top:20px;
    }
    
    .cover-font-2{
      font-family: "Segoe UI"; font-size: 20px; font-style: normal; font-variant: normal; font-weight: 400; 
      margin-top:-20px;
    }
 }


@media (min-width: 1200px) { 
      .login-container{
          margin-top:100px;
          width: 100%;
          height:600px;
      }

      .lp-left{
        background:url("../img/Login/LoginBGLeft2.jpg");
        background-size:cover;
        background-repeat: no-repeat;
        width:100%;
        height:600px;
        padding-top:180px;
        color:#ffffff;
        
      }
      .lp-right{
        background:url("../img/Login/LoginBGright.jpg");
        background-size:cover;
        background-repeat: no-repeat;
        width:100%;
        height:600px;
    }

    .cover-font-1{
      font-family: "Segoe UI"; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 600; line-height: 35px; 
      margin-top:20px;
    }
    
    .cover-font-2{
      font-family: "Segoe UI"; font-size: 20px; font-style: normal; font-variant: normal; font-weight: 400; 
      margin-top:-20px;
    }
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 1; /* Firefox */
  
}


.login-font-1{
  font-family: "Segoe UI"; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 300; line-height: 35px; 
}
.login-font-2{
  font-family: "Segoe UI"; font-size: 34px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 35px; 
}

.login-font-3{
  font-family: "Segoe UI"; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 300; line-height: 35px; 
}

.login-font-4{
  font-family: "Segoe UI"; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 35px; 
}

.login-font-5{
  font-family: "Segoe UI"; font-size: 15px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 35px; 
}

.login-font-6{
  font-family: "Segoe UI"; font-size: 15px; font-style: normal; font-variant: normal; font-weight: 470; ; 
}

.menu-font{
  font-family: "Segoe UI"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 35px; 
}

.text-purple{
  color:#7a68ae;
}
.text-accent{
  color:#36c6e1;
}


#backcover{
  background: url(../img/Header-Large.png);
  background-size: cover;
  background-repeat: no-repeat;
  height:200px;
}


#collapselogout{
   position:fixed;
   width: 300px;
   height:300px;
   margin-left: -220px; 
   margin-top:35px;
   z-index:9999;
   opacity: .9;
}

.bottom-right-bull-1 {
  position: absolute;
  bottom: 3px;
  right: 187px;
  font-size: 50px;
}

.bottom-right-bull-2 {
  position: absolute;
  font-size: 50px;
  left:207px;
  top:50px;
}


#seven{
  padding-right: 0px;
  margin: -37px;
  margin-top:5px;
}

@media (min-width: 768px){

  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
    text-decoration: none;
    
  }
}
@media (min-width: 992px) {

  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
    max-width: 14.285714285714285714285714285714% !important;
flex:none !important;
text-decoration: none;
  }
}
 
@media (min-width: 1200px) {

  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
    max-width: 14.285714285714285714285714285714% !important;
flex:none !important;
text-decoration: none;
  }
}

#menunav{
  width: 145px;
  height: 120px;
  border: 1px solid #7a68ae;
  background-color: #ffffff;
  color:#7a68ae;
}

#menunav:hover{
  width: 145px;
  height: 120px;
  border: 3px solid #ffffff;
  background: #36c6e1;
  transition: .5s all;
  border-radius: 15px;
  color:#ffffff;
}

#menunav-active{
  width: 145px;
  height: 120px;
  border: 3px solid #ffffff;
  background: #36c6e1;
  transition: .5s all;
  border-radius: 15px;
  color:#fff;
  
}


.transition {
  height:100%;
  width:100%;
  background:#d6d6d6;
  transition:1s all ease-in-out;
  -webkit-transition:1s all ease-in-out;
}



.anim-trans {
  animation: anim 1s ease-in-out;
  }

@keyframes anim{
    0%, 40%, 100% { 
    transform: scaleY(0.01);
    -webkit-transform: scaleY(0.01);
  }  50% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.fw-100{
  font-weight:100;
}

.fw-200{
  font-weight:200;
}

.fw-300{
  font-weight:300;
}

.fw-400{
  font-weight:400;
}

.fw-500{
  font-weight:500;
}

.fw-600{
  font-weight:600;
}

.fw-700{
  font-weight:700;
}

.fw-800{
  font-weight:800;
}

.fw-900{
  font-weight:900;
}


/**************************************************************************************************/
.checkbox {
    padding-left: 20px; }
    .checkbox label {
      display: inline-block;
      position: relative;
      padding-left: 5px; }
      .checkbox label::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 17px;
        height: 17px;
        left: 0;
        margin-left: -20px;
        border: 1px solid #cccccc;
        border-radius: 3px;
        background-color: #fff;
        -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
      .checkbox label::after {
        display: inline-block;
        position: absolute;
        width: 16px;
        height: 16px;
        left: 0;
        top: 0;
        margin-left: -20px;
        padding-left: 3px;
        padding-top: 1px;
        font-size: 11px;
        color: #555555; }
    .checkbox input[type="checkbox"] {
      opacity: 0; }
      .checkbox input[type="checkbox"]:focus + label::before {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px; }
      .checkbox input[type="checkbox"]:checked + label::after {
        font-family: 'Font Awesome\ 5 Free';
        content: "\f00c";
        font-weight: 900;
    }
      .checkbox input[type="checkbox"]:disabled + label {
        opacity: 0.65; }
        .checkbox input[type="checkbox"]:disabled + label::before {
          background-color: #eeeeee;
          cursor: not-allowed; }
    .checkbox.checkbox-circle label::before {
      border-radius: 50%; }
    .checkbox.checkbox-inline {
      margin-top: 0; }
  
  .checkbox-primary input[type="checkbox"]:checked + label::before {
    background-color: #428bca;
    border-color: #428bca; }
  .checkbox-primary input[type="checkbox"]:checked + label::after {
    color: #fff; }
  
  .checkbox-danger input[type="checkbox"]:checked + label::before {
    background-color: #d9534f;
    border-color: #d9534f; }
  .checkbox-danger input[type="checkbox"]:checked + label::after {
    color: #fff; }
  
  .checkbox-info input[type="checkbox"]:checked + label::before {
    background-color: #5bc0de;
    border-color: #5bc0de; }
  .checkbox-info input[type="checkbox"]:checked + label::after {
    color: #fff; }
  
  .checkbox-warning input[type="checkbox"]:checked + label::before {
    background-color: #f0ad4e;
    border-color: #f0ad4e; }
  .checkbox-warning input[type="checkbox"]:checked + label::after {
    color: #fff; }
  
  .checkbox-success input[type="checkbox"]:checked + label::before {
    background-color: #5cb85c;
    border-color: #5cb85c; }
  .checkbox-success input[type="checkbox"]:checked + label::after {
    color: #fff; }
  
  .radio {
    padding-left: 20px; }
    .radio label {
      display: inline-block;
      position: relative;
      padding-left: 5px; }
      .radio label::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 17px;
        height: 17px;
        left: 0;
        margin-left: -20px;
        border: 1px solid #cccccc;
        border-radius: 50%;
        background-color: #fff;
        -webkit-transition: border 0.15s ease-in-out;
        -o-transition: border 0.15s ease-in-out;
        transition: border 0.15s ease-in-out; }
      .radio label::after {
        display: inline-block;
        position: absolute;
        content: " ";
        width: 11px;
        height: 11px;
        left: 3px;
        top: 3px;
        margin-left: -20px;
        border-radius: 50%;
        background-color: #555555;
        -webkit-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        transform: scale(0, 0);
        -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
    .radio input[type="radio"] {
      opacity: 0; }
      .radio input[type="radio"]:focus + label::before {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px; }
      .radio input[type="radio"]:checked + label::after {
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1); }
      .radio input[type="radio"]:disabled + label {
        opacity: 0.65; }
        .radio input[type="radio"]:disabled + label::before {
          cursor: not-allowed; }
    .radio.radio-inline {
      margin-top: 0; }
  
  .radio-primary input[type="radio"] + label::after {
    background-color: #428bca; }
  .radio-primary input[type="radio"]:checked + label::before {
    border-color: #428bca; }
  .radio-primary input[type="radio"]:checked + label::after {
    background-color: #428bca; }
  
  .radio-danger input[type="radio"] + label::after {
    background-color: #d9534f; }
  .radio-danger input[type="radio"]:checked + label::before {
    border-color: #d9534f; }
  .radio-danger input[type="radio"]:checked + label::after {
    background-color: #d9534f; }
  
  .radio-info input[type="radio"] + label::after {
    background-color: #5bc0de; }
  .radio-info input[type="radio"]:checked + label::before {
    border-color: #5bc0de; }
  .radio-info input[type="radio"]:checked + label::after {
    background-color: #5bc0de; }
  
  .radio-warning input[type="radio"] + label::after {
    background-color: #f0ad4e; }
  .radio-warning input[type="radio"]:checked + label::before {
    border-color: #f0ad4e; }
  .radio-warning input[type="radio"]:checked + label::after {
    background-color: #f0ad4e; }
  
  .radio-success input[type="radio"] + label::after {
    background-color: #5cb85c; }
  .radio-success input[type="radio"]:checked + label::before {
    border-color: #5cb85c; }
  .radio-success input[type="radio"]:checked + label::after {
    background-color: #5cb85c; }


/**************************************************************************************************/
.btn.btn-fab.btn-round,
.btn.btn-just-icon.btn-round {
  border-radius: 50%;
}

/**************************************************************************************************/

.custom-icon-select {
    background-image:url(../img/search-icon.png);
    background-position:
      calc(100% - 10px) 5px,
      calc(100% - 20px) 10px,
      100% 0;
    background-size:
      30px 30px,
      30px 30px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
  }


  /***********************************************************************************************/
  /*Brand Colors of AFA
  /***********************************************************************************************/

  .bg-purple
  {
    background:#7a68ae;
  }

  .bg-accent
  {
    background:#36c6e1;
  }

  .bg-red
  {
    background:#f15a24;
  }

  .bg-yellow
  {
    background:#fadc30;
  }

  .bg-green
  {
    background:#92d246;
  }

  .bg-black
  {
    background:#000000;
  }

  .bg-darkray
  {
    background:#555555;
  }

  .bg-gray
  {
    background:#b1b1b1;
  }


/****************************************************************/

#btn-nav
{
  background:#7a68ae;
  margin-top:12px;
}
#btn-nav:hover
{
  background:#4e4176;
}





/****************************************************************/


.z-depth-0 {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.z-depth-1 {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
    0 2px 10px 0 rgba(0, 0, 0, 0.12);
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.z-depth-1-half {
  -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18),
    0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.z-depth-1-half {
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.z-depth-2 {
  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.z-depth-3 {
  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.z-depth-4 {
  -webkit-box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22),
    0 25px 55px 0 rgba(0, 0, 0, 0.21);
  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22),
    0 25px 55px 0 rgba(0, 0, 0, 0.21);
}
.z-depth-5 {
  -webkit-box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2),
    0 40px 77px 0 rgba(0, 0, 0, 0.22);
  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2),
    0 40px 77px 0 rgba(0, 0, 0, 0.22);
}
.hoverable {
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: all 0.55s ease-in-out;
  -o-transition: all 0.55s ease-in-out;
  transition: all 0.55s ease-in-out;
}
.hoverable:hover {
  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-transition: all 0.55s ease-in-out;
  -o-transition: all 0.55s ease-in-out;
  transition: all 0.55s ease-in-out;
}



#btn-breadcrumb{
  -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
  padding:15px;
  color:#fff;
}