/**
  * Coaches Concierge Admin Tool
  * Author : Frontline Business Solutions Team
  * ===================================================================
  * Table of Contents
  *
  * 1.0 - Resets
  * 2.0 - Repeatable Patterns
  * 3.0 - Structure / Grid / Column
  * 4.0 - Header
  * 5.0 - Main Content
  * 6.0 - Footer
  * 7.0 - Clearing
  * 8.0 - Mobile CSS / Media Queries
  */
 /* =================================================================== 
  * 1.0 :: Resets
  * ===================================================================
  */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
   border: 0;
   color: #6e6e6e;
   font-family: inherit;
   font-size: 100%;
   font-style: inherit;
   font-weight: inherit;
   margin: 0;
   outline: 0;
   padding: 0;
   vertical-align: baseline;
 }
 
 body {
     line-height: 1;
 }
 
 table {
     border-collapse: collapse;
     border-spacing: 0;
     width: 100%;
 }
 
 html {
     font-size: 100%;
     overflow-y: scroll;
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%
 }
 
 article, aside, figure, footer, header, nav, section, time {
     display: block
 }
 
 /* =================================================================== 
  * 2.0 :: Repeatable Patterns
  * ===================================================================
  */
 
 /* Links */
 
 :focus {
     outline: 0
 }
 a, a.link--blue, a.link--gray  {
     text-decoration: none;
 }
 
 a.link--blue {
     color: #309DDC;
     font-size: 12px;
 }
 
 a.link--blue:hover {
     color: #147EB9;
 }
 
 a.link--gray {
     color: #bbbbbb;
     font-size: 12px;
 }
 
 a.link--gray:hover {
     color: #fff;
 }
 
 /* Formating */
 b, strong {
     font-weight: bold!important
 }
 
 i, em {
     font-style: italic!important
 }
 
 small {
     font-size: 75%!important
 }
 
 sub,
 sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline
 }
 
 sup {
     top: -0.5em
 }
 
 sub {
     bottom: -0.25em
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     clear: both;
     font-weight: normal;
     margin: 0!important;
 }
 
 h1 {
     font-size: 25px;
     line-height: 35px
 }
 
 h2 {
     font-size: 20px;
     line-height: 30px
 }
 
 h3 {
     font-size: 18px;
     line-height: 25px
 }
 
 h4 {
     font-size: 14px;
     margin-bottom: 0
 }
 
 h5 {
     font-size: 12px;
     line-height: 18px;
     margin-bottom: 0
 }
 
 h6 {
     font-size: 9px;
     line-height: 15px;
     margin-bottom: 0
 }
 
 p {
     margin-bottom: 20px
 }
 
 p:last-child {
     margin-bottom: 0!important
 }
 
 .color--bluegreen {
     color: #30b58a!important
 }
 
 .color--green {
     color: #a5cf4e!important
 }
 
 .color--orange {
     color: #fdb834!important
 }
 
 .color--white {
     color: #fff!important
 }
 
 .color--red {
     color: #f00!important
 }
 
 .color--gray {
     color: #bbbbbb!important
 }
 
 /* Alignment */
 
 .left {
     float: left!important
 }
 
 .right {
     float: right!important
 }
 
 .t-center {
     text-align: center!important
 }
 
 .t-left {
     text-align: left!important
 }
 
 .t-right {
     text-align: right!important
 }
 
 .t-justify {
     text-align: justify!important
 }
 
 /* Audio & Video */
 
 audio, canvas, video {
     display: inline-block;
     vertical-align: middle!important;
     width: 100%;
 }
 
 
 /* Images */
 
 img {
     border: 0;
     -ms-interpolation-mode: bicubic;
     max-width: 100%
 }
 
 img.alignleft {
     float: left;
     margin: 0 12px 12px 0
 }
 
 img.alignright {
     float: right;
     margin: 0 0 12px 12px
 }
 
 img.aligncenter {
     display: block;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 12px
 }
 
 img.img-absolute {
     position: absolute;
 }
 
 /* Margin */
 
 .mb--20 {
     margin-bottom: 20px!important
 }
 
 .mb--10 {
     margin-bottom: 10px!important
 }
 
 .mb--30 {
     margin-bottom: 30px!important
 }
 
 .mb--40 {
     margin-bottom: 40px!important
 }
 
 /* Forms */
 form { text-align: center}
 
 button,
 input[type=submit],
 input[type=button],
 input[type=reset], 
 .thumb,
 .report {
     background: #ddd;
     border: 0;
     color:#686868;
     cursor: pointer;
     display: inline-block;
     width: 100%;
     padding: 10px;
     height: 44px;
     border-radius: 50px;
   -webkit-transition: background-color 1.5s ease-out;
   -moz-transition: background-color 1.5s ease-out;
   -o-transition: background-color 1.5s ease-out;
   transition: background-color 1.5s ease-out;    
   -webkit-transition: color 1.5s ease-out;
   -moz-transition: color 1.5s ease-out;
   -o-transition: color 1.5s ease-out;
   transition: color 1.5s ease-out;    
 }
 
 button:hover,
 input[type=submit]:hover,
 input[type=button]:hover,
 input[type=reset]:hover, 
 .thumb:hover,
 .sml-btn:hover,
 .btn-effect:hover {
     background: #7578ff;
     color: #fff;
 }
 
 input[disabled] {
     cursor: default
 }
 
 input[type=checkbox]:focus,
 input[type=radio]:focus,
 input[type=file]:focus,
 input[type=hidden]:focus {
     border: none;
     outline: 0
 }
 
 input[type=checkbox],
 input[type=radio],
 input[type=file],
 input[type=hidden],
 input[type=image],
 input[type=color] {
     border: 0!important;
     border-radius: 0!important;
     padding: 0!important
 }
 
 button,
 input,
 textarea {
     font-family: inherit
 }
 
 button,
 input {
     line-height: normal
 }
 
 textarea {
     font-size: 100%;
     overflow: auto;
     vertical-align: top
 }
 
 input[type=text],
 input[type=password],
 input[type=date],
 select,
 textarea {
     background: transparent;
     color: #ffffff;
     border: 1px solid #ddd;
     padding: 8px;
     width: 100%;
     height: 44px;
     border-radius: 45px;
     text-align: center;    
     -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
     transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
 }
 .select2-dropdown {
     background-color: transparent!important ;
     border: none!important  ;
 }
 
 .select2-container .select2-selection--single {
     height: 45px!important;
 }
 
 .select2-container--default .select2-selection--single {
     border: 1px solid #ddd!important;
     border-radius: 50px!important;
     background: transparent!important;
     color: #fff;
 }    
 
 .select2-container--default .select2-selection--single .select2-selection__rendered {
     color: #fff!important;
     line-height: 40px!important;
 }
 
 .select2-container--default .select2-selection--single .select2-selection__arrow b {
     border-color: #fff transparent transparent transparent!important;
     margin-left: -10px!important;
     margin-top: 7px!important;
 }
 
 .select2-search--dropdown {
     display: none!important;
     padding: 4px;
 }
 
 .select2-container--open .select2-dropdown--below {
     border-bottom-left-radius: 20px!important;
     border-bottom-right-radius: 20px!important;
 }
 
 .select2-results__option {
     border-radius: 20px!important;
     text-align: center;
     background: #fff!important;
 }
 
 .select2-container--default .select2-results__option--highlighted[aria-selected] {
     background-color: #5897fb!important;
     color: white;
 }
 
 .option {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none
 
     background: #7578ff;
     color: #fff;
     border-radius: 5px;
     border: none;
 
 }
 
 input[type=text]::placeholder,
 input[type=password]::placeholder{ /* Chrome, Firefox, Opera, Safari 10.1+ */
     color: #fff;
     opacity: 1; /* Firefox */    
 }
 
 input[type=text]:-ms-input-placeholder,
 input[type=password]:-ms-input-placeholder{ /* Internet Explorer 10-11 */
     color: #fff;  
 }
 
 input[type=text]::-ms-input-placeholder,
 input[type=password]::-ms-input-placeholder { /* Microsoft Edge */
     color: #fff;  
 }
 
 input[type=password]:focus,
 input[type=text]:focus,
 textarea:focus {
   /*   background: rgba(236, 236, 236, .9); */
   /*    border: 1px solid #ddd; */
 /*     -webkit-box-shadow: 0px 0px 1px 2px rgba(24,146,216,0.75);
 -moz-box-shadow: 0px 0px 1px 2px rgba(24,146,216,0.75);
 box-shadow: 0px 0px 1px 2px rgba(24,146,216,0.75);  */
 }
 
 form label {
     color: #6e6e6e;
     display: block;
     text-align: left;
 }
 
 form textarea {
     height: 250px
 }
 
 
 form .icon {
 /*     background: #cfcfcf; */
     color: #fff;
     padding: 10px 15px;
     font-size: 24px;
 }
 
 .flex {
     display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
     display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
     display: -ms-flexbox;      /* TWEENER - IE 10 */
     display: -webkit-flex;     /* NEW - Chrome */
     display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }
 .flex-item {
     -ms-flex: 1;
     -webkit-flex: 1;
     flex: 1;
 }
 
 .flex--item-center {
     -webkit-justify-content: center;
     -moz-justify-content: center;
     -ms-justify-content: center;
     -o-justify-content: center;
     justify-content: center; 
 
     -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
     -webkit-align-items: center;
     align-items: center;
 }
 
 .log--height {
     -webkit-height: 100vh;
     -moz-height: 100vh;
     -ms-height: 100vh;
     -o-height: 100vh;
    height: 100vh;  /* The Fallback */
}
 
 .user--height {
/*  -webkit-height: 90vh;
     -moz-height: 90vh;
     -ms-height: 90vh;
     -o-height: 90vh;
    height: 90vh;  The Fallback */
    min-height: 840px;
    padding: 40px 0;
 }
 
 .item{
     flex-basis: 10%;
 }
 
 .icon {
    width: 300px;
     margin-bottom: 20px;
 }
 .arrow-up {
     top:-35px;
   width: 0; 
   height: 0; 
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   border-bottom: 15px solid #fff;
   position: relative;
   margin: auto;
 }
 
 
 /* Table */
 table {
     border-collapse: separate;
     width: 100%;
 }
 table, td, th {
     text-align: center;
     border-spacing: 10px 5px!important;
     border-collapse: separate!important;
     font-size: 14px;
     color:#505050;
 }
 
 th {
     text-align: center;
     font-weight: bold;
     /* vertical-align: middle; */
     font-size: 12px;
     
 }
 
 /* BG Color & Divider Images */
 
 .bg--bluegreen {
     background: #30b58a; /* fallback for old browsers */
     background: -webkit-linear-gradient(right, #30b58a, #4dc8a0);
     background: -moz-linear-gradient(right, #30b58a, #4dc8a0);
     background: -o-linear-gradient(right, #30b58a, #4dc8a0);
     background: linear-gradient(to left, #30b58a, #4dc8a0); 
 }
 
 .bg--img-gradient {
     background: url(../bg1.jpg);
     background-position: center center;
     background-size: cover;
 }
 
 .bg--purple {
    background: #009688;
    background: -webkit-linear-gradient(top, #7579ff, #009688);
    background: -o-linear-gradient(top, #7579ff, #009688);
    background: -moz-linear-gradient(top, #7579ff, #009688);
    background: linear-gradient(top, #7579ff, #009688, .07); 
 }
 
 .bg--white {
 
 /*     position: relative; 
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;
     margin: auto;*/
     color: #686868;
     padding: 20px;
     background: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);      
 }
 
 .wrap--content {
     width: 400px;
     text-align: center;
 }
 
 .wrap--content2 {
     width: 1000px;
     text-align: center;
 }


 /* ERROR MESSAGE FORMAT*/
 p.color--white span,
 #usr_msg {
     background: rgb(255, 255, 255);
     width: 100%;
     display: block;
     border-radius: 15px;
 }
 
 /* DEBUGGING CLASS */
 .debug  {
     position: absolute;
     border: 1px solid red;
     width: 600px;
     height: 500px;
     background: rgb(255, 255, 255);
     z-index: 2;
     overflow-y: auto;
     color: red!important;
 }
 
 #thumbwrap { 
 /*    position:relative; top: 22px;
     left: -25px; */
 
     position: absolute;
 /*    top: 0;
     left: 0;
     bottom: 0;
     right: 0;*/
     width: 100%;
     z-index: -2;
     text-align: center;
 } 
 
 header .thumb { 
     text-align: center;
     width: 100px;
     padding: 12px;
 
 }
 
 .sml-btn {
     height: 20px!important;
     padding: 0px!important;
     font-size: 12px!important;
     width: 100px!important;
     background: #ddd;
     border: 0;
     color: #686868;
     cursor: pointer;
     display: inline-block;
     text-align: center;
     border-radius: 50px;
     -webkit-transition: background-color 1.5s ease-out;
     -moz-transition: background-color 1.5s ease-out;
     -o-transition: background-color 1.5s ease-out;
     transition: background-color 1.5s ease-out;
     -webkit-transition: color 1.5s ease-out;
     -moz-transition: color 1.5s ease-out;
     -o-transition: color 1.5s ease-out;
     transition: color 1.5s ease-out;
 }
 
 .btn-effect {
     background: #ddd;
     border: 0;
     color: #686868;
     cursor: pointer;
     display: inline-block;
     text-align: center;
     border-radius: 50px;
     -webkit-transition: background-color 1.5s ease-out;
     -moz-transition: background-color 1.5s ease-out;
     -o-transition: background-color 1.5s ease-out;
     transition: background-color 1.5s ease-out;
     -webkit-transition: color 1.5s ease-out;
     -moz-transition: color 1.5s ease-out;
     -o-transition: color 1.5s ease-out;
     transition: color 1.5s ease-out;
 }
 
 .hide-thumb { 
 /*    position: absolute;
     top: -250px;
     width: 600px;
     height: 500px;
     background: #fff;
     z-index: 2;
     border-radius: 10px;
     padding: 10px 0 10px 20px;
     color: red;
     display: none;*/
 
     position: relative;
     width: 80%;
     height: 500px;
     background: #fff;
     z-index: 2;
     border-radius: 10px;
     padding: 10px 0 10px 20px;
     color: red;
     display: none;
     border: 1px solid red;
     /* left: 0; */
     /* right: 0; */
     top: 5%;
     /* bottom: 0; */
     /* margin: auto; */
     text-align: left;

 } 
 
 .scroll-content {
     overflow:   auto;
     height: 465px;
     margin-top: 10px;
 }
 
 .hide-thumb p { 
     color: red;
 }
 
 .hide-thumb a { content:""; 
     background: #fff url(../i-close.png) center center no-repeat; 
     text-indent: -9999px; 
     height: 30px; 
     position: absolute; 
     right: -10px; 
     top: -10px; 
     width: 30px; 
     z-index: 3; 
     border-radius: 50%; 
     border: 2px solid #d5d5d5;
 }
 
 /* ===================================================================
  * 3.0 :: Structure / Grid/ Column
  * ===================================================================
  */
 body {
     color: #2b2b2b;
     font: 14px/24px Arial, Helvetica, sans-serif
 }
 
 .inside {
     margin-left: auto;
     margin-right: auto;
     width: 1000px
 }
 
 .last {
     clear: right;
     margin-right: 0!important
 }
 
 /* Grid / Colums */
 
 .one-whole {
     width: 100%;
 }
 
 .one-half {
     width: 49%
 }
 
 .one-third {
     width: 32%;
 }
 
 .one-fourth {
     width: 23.5%
 }
 
 .one-fifth {
     width: 18.4%
 }
 
 .one-sixth {
     width: 15%
 }
 
 .one-tenth {
     width: 8%
 }
 
 .two-third {
     width: 66%
 }
 
 .two-fifth {
     width: 38.8%
 }
 
 .three-fourth {
     width: 74.5%
 }
 
 .three-fifth {
     width: 59.2%
 }
 
 .four-fifth {
     width: 79.6%
 }
 
 .five-sixth {
     width: 83%
 }
 
 .nine-tenth {
     width: 90%
 }
 
 .one-half,
 .one-third,
 .two-third,
 .three-fourth,
 .one-fourth,
 .one-fifth,
 .two-fifth,
 .three-fifth,
 .four-fifth,
 .one-sixth,
 .five-sixth,
 .one-tenth,
 .nine-tenth {
     margin-right: 2%;
/*     margin-bottom: 10px; */
     float: left;
     position: relative;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box
 }
 
 /*.one-third,
 .two-third{
     width: 100%;
 }*/
 
 .two-third{
     border-bottom: 1px solid #bbb;
     padding-bottom: 5px;
 }
 
 .one-tenth,
 .nine-tenth {
     margin-bottom: 0;
     border: 1px solid;
 }
 
 .last {
     margin-right: 0!important;
     clear: right
 }
 
 /* =================================================================== 
  * 4.0 :: Header
  * ===================================================================
  */
 header {
     padding: 20px 0;
     background: #3F51B5;
     color: #fff;
 }
 
 header #logo--1 {
     float: left;
     margin: 25px 0;
     width: 250px;
 }
 
 header #logo--2 {
     float: left;
     margin: 20px 0; 
     display:none;
 }
 
 header #logo--3 {
     float: right;
     margin-top: 7px;
     width: 150px
 }
 
 header a {
     font-size: 12px;
     color: #bbbbbb;
     display: block;
     line-height: 20px;
     text-align: left;
     width: 160px;
     margin-right: 0;
     /* margin-left: auto; */
 }
 
 header a:hover {
     color: #fff;
 }
 
 .user {
     color: #30b58a; 
     font-weight: bold;
 /*     line-height: 5px; */
 }
 /* =================================================================== 
  * 5.0 :: Main Content
  * ===================================================================
  */
 #wrap--content,
 #wrap--content-inner {
     padding: 30px 0;
     background-size: cover;
   
 }
 
 #wrap--content .inside,
 #wrap--content-inner .inside {
     padding-left: 5%;
     padding-right: 5%;
 }
 
 
 
 /* ===================================================================
  * 6.0 :: Footer
  * ===================================================================
  */
 footer {
     color: #9e9e9e;
     font-size: 13px;
     padding: 15px 0;
     text-align: center
 }
 
 footer img {
     vertical-align: top;
     width: 160px;
 }
 
 footer p {  
     margin-bottom: 0;
     font-size: 12px;
 }
 
 footer .copyright, footer a {
     vertical-align: middle;
 }
 
 
 /* ===================================================================
  * 7.0 :: Clearing
  * ===================================================================
  */
 * {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box
 }
 
 .clearfix:after,
 .inside:after,
 li:after,
 form:after,
 article:after {
     content: " ";
     clear: both;
     display: block;
     font-size: 0;
     height: 0;
     visibility: hidden
 }
 
 /* ===================================================================
  * 8.0 :: Mobile CSS
  * ===================================================================
  */
 @media screen and (max-width: 970px) {
     .inside {
         width: 100%
     }
    
 
 }
 
 @media screen and (max-width: 900px) {
 
 }
 
 @media screen and (max-width: 840px) {
     /* Main Content */
     
 
 }
 
 @media screen and (max-width: 768px) {
     .one-half,
     .one-third,
     .two-third,
     .three-fourth,
     .one-fourth,
     .one-fifth,
     .two-fifth,
     .three-fifth,
     .four-fifth,
     .one-sixth,
     .five-sixth,
     .one-tenth,
     .nine-tenth {
         margin-right: 0!important;
         width: 100%!important;
     }
 
     .one-third {
         text-align: center!important;
     }
 
     .last {
         margin-bottom: 20px!important;
     }
 
     .sml-btn {
         width: 400px!important;
         padding: 10px!important;
         height: auto!important;
         float: none!important;
     }
 }
 
 @media screen and (max-width: 640px) {
 
 }
 
 @media screen and (max-width: 500px) {
 
     h1 {
         font-size: 20px;
         line-height: 30px
     }
     h2 {
         font-size: 18px;
         line-height: 26px
     }
     h3 {
         font-size: 16px;
         line-height: 20px
     }
     header {
         padding: 20px 0 0;
     }
 
     .wrap--content {
         width: 100%;
     }
 
     .sml-btn {
         width: 100%!important;
     }
 
 }
 
 @media screen and (max-width: 320px) { 
 
 
}