@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

:root {
    --blue-50: #F1F3FF;
    --blue-100: #1E60D4;
    --blue-200: #0050A0;
    --green-50: #F1FFF1;
    --green-100: #137E0F;
    --green-200: #0E6D09;
    --red-50: #FFE6E5;
    --red-100: #CE2521;
    --red-200: #AA0F0F;
    --yellow-50: #FFEDD6;
    --yellow-100: #D17300;
    --yellow-200: #A05000;
    --gray-100: #F3F2F1;
    --gray-200: #F1F3F4;
    --gray-300: #BABABA;
    --gray-400: #505050;
    --gray-500: #E5E5E5;
    --gray-600: #E5EBEE;
    --gray-700: #707070;    
    --purple-50: #DAD4F5;
    --purple-100: #A44DC4;
    --purple-200: #443294;
    --black: #000000;
    --white: #FFFFFF;

    --bg-gradient-primary: linear-gradient(180deg, #7fa1e1, #3957d1);
    --bg-gradient-success: linear-gradient(180deg, #22E41B, #137E0F);
    --bg-gradient-black: linear-gradient(180deg, #757575, #000000);
    --bg-gradient-danger: linear-gradient(180deg, #FF8686, #CE2521);
    --bg-gradient-warning: linear-gradient(180deg, #FFBD6F, #F9951F);

    --opacity-0: 0;
    --opacity-25: 0.25;
    --opacity-50: 0.50;
    --opacity-75: 0.75;

    --card-shadow: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
}

body {
    background-color: #fafbfe;
    color: #191919;
    font-family: 'Lato', sans-serif;
}

body[data-layout=topnav] .container-fluid {
    max-width: 100%;
}

h4,
h4 label {
    color: var(--blue-100);
    font-weight: 900;
}

.breadcrumb-item.active label {
    color: var(--blue-100);
    font-size: 18px;
}

p,
th,
td {
    color: #000;
}


/**************************************************/
/***********       BACKGROUND       ***************/    
/**************************************************/
.bg-light {
    background-color: #dadde1 !important;
}

.bg-primary {
    background-color: var(--blue-100) !important;
}

.bg-blue-50 {
    background-color: var(--blue-50) !important;
}

.bg-blue-200 {
    background-color: var(--blue-200) !important;
}

.bg-secondary {
    background-color: var(--gray-400) !important;
}

.bg-success {
    background-color: var(--green-100) !important;
}

.bg-green-50 {
    background-color: var(--green-50) !important;
}

.bg-green-200 {
    background-color: var(--green-200) !important;
}

.bg-warning {
    background-color: var(--yellow-100) !important;
}

.bg-yellow-50 {
    background-color: var(--yellow-50) !important;
}

.bg-yellow-200 {
    background-color: var(--yellow-200) !important;
}

.bg-danger {
    background-color: var(--red-100) !important;
}

.bg-red-50 {
    background-color: var(--red-50) !important;
}

.bg-red-200 {
    background-color: var(--red-200) !important;
}

.bg-gray-50 {
    background-color: var(--gray-50) !important;
}

.bg-gray-100 {
    background-color: var(--gray-100) !important;
}

.bg-gray-200 {
    background-color: var(--gray-200) !important;
}

.bg-gray-300 {
    background-color: var(--gray-300) !important;
}

.bg-gray-400 {
    background-color: var(--gray-400) !important;
}

.bg-gray-500 {
    background-color: var(--gray-500) !important;
}

.bg-gray-600 {
    background-color: var(--gray-600) !important;
}

.bg-gray-700 {
    background-color: var(--gray-700) !important;
}

.bg-dragula {
    background-color: #EEEEEE !important;
}

.bg-purple {
    background-color: var(--purple-100) !important;
}

.bg-gradient-primary{
    background-image: linear-gradient(180deg, #7fa1e1, #3957d1);
}

.bg-gradient-success{
    background-image: linear-gradient(180deg, #22E41B, #137E0F);
}

.bg-gradient-black{
    background-image: linear-gradient(180deg, #757575, #000000);
}

.bg-gradient-danger{
    background-image: linear-gradient(180deg, #FF8686, #CE2521);
}

.bg-gradient-warning{
    background-image: linear-gradient(180deg, #FFBD6F, #F9951F);
}

.bg-gradient-success-opacity{
    background-image: linear-gradient(180deg, #22E41B, #137E0F);
    opacity: var(--opacity-25);
}

.bg-gradient-black-opacity{
    background-image: linear-gradient(180deg, #757575, #000000);
    opacity: var(--opacity-25);
}

.bg-gradient-danger-opacity{
    background-image: linear-gradient(180deg, #FF8686, #CE2521);
    opacity: var(--opacity-25);
}

.bg-gradient-warning-opacity{
    background-image: linear-gradient(180deg, #FFBD6F, #F9951F);
    opacity: var(--opacity-25);
}

/**************************************************/
/***********          BORDERS       ***************/    
/**************************************************/
.border-primary {
    border-color: var(--blue-100) !important;
}

.border-secondary {
    border-color: var(--gray-400) !important;
}

.border-red,
.border-danger {
    border-color: var(--red-100) !important;
}

.border-yellow,
.border-warning {
    border-color: var(--yellow-100) !important;
}

.border-green,
.border-success {
    border-color: var(--green-100) !important;
}

.border-secondary {
    border-color: var(--gray-400) !important;
}

.border-white {
    border-color: var(--white) !important;
}


/**************************************************/
/***********       TEXT COLOR       ***************/    
/**************************************************/
.text-primary {
    color: var(--blue-100) !important;
}

.text-success {
    color: var(--green-100) !important;
}

.text-warning {
    color: var(--yellow-100) !important;
}

.text-danger {
    color: var(--red-100) !important;
}

.text-white {
    color: var(--white) !important;
}

.text-black {
    color: var(--black) !important;
}


/**************************************************/
/***********         BUTTONS       ***************/    
/**************************************************/
.btn {
    color: var(--gray-700);
    background-color: var(--white);
}

.btn:hover{
    color: var(--blue-200);
}

.btn-close{
    background: none;
    font-size: 16px;
    line-height: 1;
}

.btn-close:hover{
    color: var(--white);
    background-color: var(--red-100);
    opacity: 1;
}

.btn-primary {
    background-color: var(--blue-100) !important;
    border-color: var(--blue-100) !important;
    color: var(--white) !important;
}

.btn-light {
    background-color: var(--white) !important;
    border-color: var(--gray-700) !important;
    color: var(--gray-700) !important;
}

.btn-success {
    background-color: var(--green-100) !important;
    border-color: var(--green-100) !important;
    color: var(--white) !important;
}

.btn-danger {
    background-color: var(--red-100) !important;
    border-color: var(--red-100) !important;
    color: var(--white) !important;
}

.btn-warning {
    background-color: var(--yellow-100) !important;
    border-color: var(--yellow-100) !important;
    color: var(--white) !important;
}

.btn-dark {
    background-color: var(--gray-700) !important;
    border-color: var(--gray-700) !important;
    color: var(--white) !important;
}

.btn-secondary:hover {
    background-color: var(--gray-100) !important;
    color: var(--black) !important;
}


.btn-outline-primary{
    color: var(--blue-100);
    border-color: var(--blue-100);
}

.btn-outline-primary:hover{
    color: var(--blue-100);
    background-color: var(--blue-50);
    border-color: var(--blue-100);
}

.btn-outline-secondary {
    color: var(--gray-700);
    border-color: var(--gray-700);
}

.btn-outline-danger {
    color: var(--red-100);
    border-color: var(--red-100);
}

.btn-outline-danger:hover{
    color: var(--white);
    background-color: var(--red-100);
    border-color: var(--red-100);
}


/*.btn-outline-primary.disabled{
    color: var(--blue-100);
    background-color: var(--blue-50);
    border-color: var(--blue-50);
    opacity: 1;
}*/

/**************************************************/
/*************         FORMS       ***************/    
/**************************************************/
.form-control {
    border: 1px solid var(--gray-300);
    color: var(--black);
}

.form-control:focus,
.form-control::placeholder {
  color: var(--black);
}

.form-select {
    border: 1px solid var(--gray-300);
    color: var(--black);
}

.input-group-text{
    border: 1px solid var(--gray-300);
}


/**************************************************/
/*************         ALERTS       ***************/    
/**************************************************/
.alert-dark {
    background-color: var(--gray-100);
}

.alert-secondary {
    background-color: var(--gray-100);
}


/**************************************************/
/*************         TABLE       ***************/    
/**************************************************/
.table-primary th {
    background-color: var(--blue-100) !important;
    color: var(--white) !important;
    text-align: center;
}

.table-success th {
    background-color: var(--green-100) !important;
    color: var(--white) !important;
    text-align: center;
}


/**************************************************/
/*************         WIDTH       ***************/    
/**************************************************/
.w-5 {
    width: 5%;
}

.w-10 {
    width: 10%;
}

.w-15 {
    width: 15%;
}

.w-20 {
    width: 20%;
}

.w-25 {
    width: 25%;
}

.w-30 {
    width: 30%;
}

.w-35 {
    width: 35%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-75 {
    width: 75%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.w-95 {
    width: 95%;
}

.w-100 {
    width: 100%;
}


/**************************************************/
/*************         BADGES       ***************/    
/**************************************************/
.badge-outline-primary {
    color: var(--blue-100);
    border: 1px solid var(--blue-100);
}

.badge-outline-secondary {
    color: var(--gray-400);
    border: 1px solid var(--gray-400);
}

.badge-outline-success {
    color: var(--green-100);
    border: 1px solid var(--green-100);
}

.badge-outline-danger {
    color: var(--red-100);
    border: 1px solid var(--red-100);
}


.topnav-navbar-dark{
    background-color: #1E60D4;
}

.nav-user .account-user-avatar{
    top: 0;
}

.nav-user{
    padding: calc(50px * .5) 20px calc(31px * .5) 57px!important;
}

.col-xxl-4 .card, .col-xxl-6 .card{
    
    /*border-left: solid 10px #1e79e0;*/
}

.card .card-widgets>a,
.table > a.dropdown-toggle {
    color: #333;
    font-size: 17px;
    text-align: center;
    background-color: #f5f5f5;
    height: 30px;
    padding: 4px;
    width: 30px;
    border-radius: 4px;
}

.card .card-widgets #period-type p{
    float: left;
}
.card .card-widgets #period-type select{
    float: left;
    width: 57%;
}

.widget-icon {
    color: #fff;
}

.topnav-navbar-dark .app-search .form-control{
    background-color: #ffffff;
}

.navbar-light .navbar-nav .nav-link{
    padding: .7rem 1rem;
}

.navbar-light .navbar-nav .nav-link{
    color: #fff;
}

.navbar-light .navbar-nav .active .nav-link{
    border-bottom: solid 2px #fff;
}

.navbar-light .navbar-nav .active .nav-link{
    color: #fff;
    font-weight: 900;
}

.navbar-custom .topbar-menu .nav-link{
    color: #ffffff;
    background-color: transparent !important;
    border: 0 !important;
}

.notification-list .noti-icon-badge-text{
    display: inline-block;
    position: absolute;
    top: 15px;
    right: -2px;
    border-radius: 50%;
    height: 18px;
    width: 18px;
    font-size: 11px;
    background-color: #CE2521;
}

.notification-list .noti-icon-badge{
    top: 22px;
    right: 0px;
    height: 10px;
    width: 10px;
    background-color: #CE2521;
}

.card .header-title{
    font-size: 1.1rem;
    color: #1E60D4;
    font-weight: 700;
}

.treshold{
    border-right: solid 2px #fff;
}

.down-trend{
    transform: rotate(180deg);
}

.btn.btn-link.p-0{
    color: #333;
}

.help-menu{
    color: #333;
    font-size: 17px; 
    text-align: center;
    background-color: #f5f5f5; 
    height: 30px; 
    padding: 4px !important; 
    width: 30px; 
    border-radius: 4px;
}

.dropdown-item.active{
    color: #137e0f;
    font-weight: 700;
}

.dropdown-item.active:before {
    content: "\2713";
    margin-right: 5px;
}


.navbar-nav .dropdown-menu {
    position: absolute;
    top: 0;
    left: 25px;
}


.test .progress {
    background-color: transparent;
}

.progress {
    background-color: #ccc;
    height: 16px;
}

.progress.scorecard,
.progress.scorecard .progress-bar {
    height: 28px;
    overflow: inherit;
}

.progress-sm {
    height: 5px;
}

.progress-md {
    height: 10px;
}

.progress-lg {
    height: 16px;
}



.progress-bar {
    font-weight: 900;
    font-size: 13px;
}


.table>:not(caption)>*>*{
    padding: .65rem .95rem;
}

.page-title-box .page-title-right{
    margin-top: 10px;
}

.btn-tools{
    padding: 3px 5px;
    margin: 0 15px;
}

.btn-scorecard-filter.active{
    background-color: #1E60D4 !important;
    color: #fff !important;
}

.mat-tab-label {
    min-width: auto !important;
}

.table tr.text-dark th,
.table th.test,
.table th.asc,
.table th.desc{
    cursor: pointer;
}

.table th.asc,
.table th.desc{
    color: #3957d1;
}

.table tr.text-dark th img,
.table tr.text-dark td img{
    width: 18px;
}

.table tr.text-dark td a{
    color: #000;
}

.card-body-performance{
    max-height: 200px;
}

.carousel-control-next, .carousel-control-prev,
.carousel-control-next:hover, .carousel-control-prev:hover,
.carousel-control-next:active, .carousel-control-prev:active{
    color:#000;
    font-size: 30px;
    width: 5%;
    opacity: 1;
}

.carousel-control-prev{
    left: -35px;
}

.carousel-control-next{
    right: -35px;
}

.loading{
    background-color:rgba(255,255,255,1);
    width: 100%;
    height: 100%;
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 35%;
    padding-bottom: 35%;
}
.loader {
    border: 10px solid #f3f3f3; /* Light grey */
    border-top: 10px solid #1E60D4; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    margin: 0 auto;
}
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }




  .tooltips {
    position: relative;
    display: inline-block;
    width: 100%;
  }
  
  .tooltips .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 130%;
    left: 50%;
    margin-left: -125px; /* Use half of the width (120/2 = 60), to center the tooltip */
  }
  
  .tooltips:hover .tooltiptext {
    visibility: visible;
  }
  
  .tooltips .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }




.list-group .list-group-item::first-child{
    cursor: default;
}
.list-group-item{
    cursor: pointer;
}

.list-group-item .team-info{
    display: none;
}

.list-group-item.d-flex:hover{
    background-color: var(--gray-200);
}

.list-group-item:hover .team-info{
    display: block;
    z-index: 99;
}

.team-info {
    width: 270px;
}

.team-info::before {
    content: "";
    position: absolute;
}

.team-info::before {
  left: -20px;
  top: 45%;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid var(--gray-400);
}

.horizontal .column-bars-teams .team-info::before {
  left: 130px;
  top: -20px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid var(--gray-400);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}


/******************* Teams Scorecard Column ****************************/
.column-bars .team-info{
    display: none;
}

#teams-column-h{
    height: 320px;
    overflow: hidden;
}

h3 span.text-light::after{
    content: "";
    border-left: 3px solid #d2d2d2;
    height: 22px;
    position:absolute;
    left: 49%;
    top: 28px;
}

.horizontal h3 span.text-light::after{
    display: none;
}

.column-bars-teams{
    width: 25px; 
    background-color: #d2d2d2; 
    border-radius: 30px;
    position: relative;
    margin: 0 auto;
    cursor: pointer;
    min-height: 270px;
}

.horizontal .column-bars-teams{
    width: 100%; 
    background-color: #d2d2d2; 
    border-radius: 30px;
    position: relative;
    margin: 0 auto;
    cursor: pointer;
    min-height: 25px;
}

.horizontal .column-bars-teams .ammount .info-card{
    display: none;
}

.horizontal .column-bars-teams .ammount:hover .info-card{
    display: block;
    top: 40px;
}

.column-bars-teams .info-card{
    display: none;
    z-index: 999;
}

.column-bars-teams:hover .info-card{
    display: block;
}

.horizontal .column-bars-teams .ammount{
    width: 100%; 
    border-radius: 30px;
    position: absolute;
    top: 0;
}

.horizontal .column-bars-teams .ammount.succeed{
    left: 0;
    border-radius: 30px 0 0 30px;
    background-image: linear-gradient(180deg, #3ee637, #137f0f);
}

.horizontal .column-bars-teams .ammount.needs{
    right: 0;
    border-radius: 0 30px 30px 0;
    background-image: linear-gradient(180deg, #7fa1e1, #3957d1);
}

.column-bars-teams .ammount{
    width: 100%; 
    border-radius: 30px;
    position: absolute;
    bottom: 0;
}

.column-bars-teams .ammount.succeed{
    background-image: linear-gradient(90deg, #3ee637, #137f0f);
}

.column-bars-teams .ammount.needs{
    background-image: linear-gradient(90deg, #7fa1e1, #3957d1);
}

.column-bars-teams.shadow{
    width: 35px;
    padding: 5px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08) !important;
}

.column-bars-teams.shadow .ammount{
    width: 70%; 
    bottom: 5px;
}


.cmps-accordion.cmps-accordion--a .cmps-accordion-header.cmps-accordion-header--a{
    display: grid !important;
}

.cmps-accordion.cmps-accordion--a .cmps-accordion-header.cmps-accordion-header--a .cmps-icon{
    display: none;
}

/******************* My Performance Card ****************************/

.pillar h5 .badge{
    width: 16px;
    height: 16px;
}
span.icons-top{
    top:-10px; 
}

span.icons-bottom{
    top:25px;
}

span.icons-top::after{
    content: "";
    border-left: 1px solid #000;
    height: 4px;
    position:absolute;
    left: 50%;
    top: 18px;
}

span.icons-bottom::after{
    content: "";
    border-left: 1px solid #000;
    height: 4px;
    position:absolute;
    left: 50%;
    top: -3px;
}

/******************* Ranking ****************************/

.ranks span.float-start::after{
    content: "";
    border-bottom: 1px solid #ccc;
    width: 79%;
    position:absolute;
    left: 41px;
    bottom: 13px;
}

/******************* Scorecard ****************************/

.wrapper0 .content-page{
    background-image: linear-gradient(180deg, #CCDEFF, #6F9BE8, #1E60D4);
}

.card.glassmorph0{
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: rgba( 255, 255, 255, 0.80 );
    /*-webkit-backdrop-filter: blur( 4px );
    backdrop-filter: blur( 4px );*/
}

/**************************************************/
/*************    COACHING HEADER   ***************/    
/**************************************************/

.avatar-lg {
    height: 4rem;
    width: 4rem;
}

.main-coaching.nav-tabs.nav-bordered{
    border: 0px;
}

.main-coaching.nav-tabs.nav-bordered li a.active {
    border-bottom: 0;
}

.main-coaching .nav-item .active {
    background-color: transparent !important;
}

.main-coaching li.nav-item a hr{
    display: none;
}
.main-coaching li.nav-item a.active hr{
    display: block;
    height: 8px;
    opacity: 1;
}

.main-coaching .nav-item .percentage{
    width: 90px;
    height: 90px;
    font-size: 24px;
    border: solid 7px;
    padding: 1.1rem 0;
}

.main-coaching-01.nav-tabs.nav-bordered{
    border: 0px;
}
.main-coaching-01 .nav-item .active {
    background-color: transparent !important;
}
.main-coaching-01.nav-tabs.nav-bordered li a.active {
    border-bottom: 6px solid var(--gray-700);
    color: var(--black);
}
.main-coaching-01 .nav-item .percentage{
    display: inline-block;
    width: 70px;
    height: 70px;
    font-size: 20px;
    font-weight: 700;
    border: solid 4px;
    padding: 0.9rem 0;
}

.main-coaching-02.nav-tabs.nav-bordered,
.main-coaching-04-header.nav-tabs.nav-bordered{
    border: 0px;
}
.main-coaching-02.nav-tabs.nav-bordered li a.active {
    border-bottom: 8px solid var(--gray-700);
    color: var(--black);
}

.main-coaching-02.nav-tabs.nav-bordered li{
    width: 20%;
}
.main-coaching-02 .nav-item .active {
    background-color: transparent !important;
}

.main-coaching-03.nav-tabs.nav-bordered li a.active {
    border-bottom: 8px solid var(--gray-700);
    color: var(--black);
}

.main-coaching-03 .nav-item .active {
    background-color: var(--gray-100) !important;
    border-radius: 0;
}

.main-coaching-04.nav-tabs.nav-bordered{
    border: 0;
}
.main-coaching-04-header.nav-tabs.nav-bordered li{
    width: 25%;
}
.main-coaching-04.nav-tabs.nav-bordered li{
    width: 25%;
}
.main-coaching-04 li.nav-item a.active {
    background-color: var(--gray-500) !important;
    border-bottom: 4px solid var(--gray-400);
}

.main-coaching-04 a.nav-link:hover{
    background-color: var(--gray-500) !important;
}

.main-coaching-04 li.nav-item a .tab-tooltip {
    display: none;
}

.main-coaching-04 li.nav-item a:hover .tab-tooltip {
    display: block;
}

#roster-view .card-body > .row.user-row:hover{
    background-color: var(--gray-100);
}

.muliple-selection .nav-tabs.nav-bordered li a.active{
    background-color: var(--gray-500) !important;
    border-bottom: 4px solid #1E60D4;
}

.muliple-selection .nav-tabs.nav-bordered{
    border-bottom: 2px solid rgba(152, 166, 173, .0);
}


/**************************************************/
/*************     VERTICAL MENU    ***************/    
/**************************************************/

.topnav-navbar.vertical{
    min-height: 98vh;
    position: fixed;
    width: 80px;
    top: 1vh;
    border-radius: 0 5px 5px 0;
    transition: width 0.7s;
}

.topnav-navbar.vertical:hover{
    width: 200px;
}

.topnav-navbar.vertical .topnav-logo{
    padding-right: 0;
    min-width: 70px;
    width: 100%;
}

.topnav-navbar.vertical .topnav-logo img{
    height: 30px;
}

.topnav-navbar.vertical .navbar-light .navbar-nav .nav-link{
    color: var(--blue-50);
    border-bottom: 0;
}

.topnav-navbar.vertical .navbar-light .navbar-nav .active .nav-link{
    color: #fff;
}

.topnav-navbar.vertical .navbar-light .navbar-nav .nav-link span{
    display: none;
    color: #fff;
}

.topnav-navbar.vertical .navbar-light .navbar-nav .nav-link i{
    font-size: 22px;
    margin-right: 10px;
}

.topnav-navbar.vertical:hover .navbar-light .navbar-nav .nav-link span{
    display: inline-block;
    animation: fadeIn 0.9s;
}


/**************************************************/
/***************     FLIP CARD     ***************/    
/**************************************************/
.animation {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.card-flip {
  width: 100%;
  height: 115px;
  cursor: pointer;
  
  /*transition effects */
  -webkit-transition: -webkit-transform 0.6s;
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  transition: transform 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.card-flip.flipped {
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}
.card-flip.flipped:{ 
}

.card-flip .front,
.card-flip .back {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-flip .back {
  width: 100%;
}

.card-flip .back {
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}

.bg-success.border-0.mb-0.rounded,
.bg-danger.border-0.mb-0.rounded {
    width: 20px;
}

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

input[data-switch]+label{
    width: 76px;
}

input[data-switch]:checked+label:after{
    left: 53px;
}


/*************************************************/
.table-coaching-connection{
    border-collapse: separate;
    border-spacing: 4px 0;
}

.table-coaching-connection th{
    border: solid 1px var(--gray-600);
}

.table-coaching-connection tbody td{
    border-top: 0;
    border-bottom: solid 1px var(--gray-600);
    border-left: solid 1px var(--gray-600);
    border-right: solid 1px var(--gray-600);
}

/*************************************************/
.select2-container .select2-selection--multiple{
    display: flex;
}

.select2-container .select2-selection--multiple .select2-selection__rendered{
    margin-bottom: 0;
}


/*************************************************/
.form-selector .badge{
    cursor: pointer;
    background-color: var(--gray-500);
    border-color: var(--gray-400);
    color: var(--gray-400);
}
.form-selector .badge.active{
    background-color: var(--blue-100);
    border-color: var(--blue-100);
    color: var(--white);
}

.forms-view .badge{
    display: none;
}

.forms-view .badge.show{
    display: inline-block;
}

.table-coaching-connection tr{
    cursor: pointer;
}

.table-coaching-connection td{
    padding: .50rem .65rem;
    align-content: center;
}

.table-coaching-connection tr:hover{
    background-color: var(--blue-50);
}

/** View Person *****/
.table-coaching-connection .form-user{
    display: none;
}

/** View Form *****/
.table-coaching-connection .section-01, .table-coaching-connection .section-02,
.table-coaching-connection .question-01, .table-coaching-connection .question-02,
.table-coaching-connection .direct-report-01, .table-coaching-connection .direct-report-02{
    display: none;
}

/** View Senior Leader *****/
.table-coaching-connection .team-manager,
.table-coaching-connection .senior-section-01, .table-coaching-connection .senior-section-02,
.table-coaching-connection .senior-question-01, .table-coaching-connection .senior-question-02,
.table-coaching-connection .agent-01, .table-coaching-connection .agent-02{
    display: none;
}

.table-coaching-connection tr.show{
    display: table-row;
}

.table-coaching-connection tr td .mdi.mdi-chevron-right,
.table-coaching-connection tr td .mdi.mdi-chevron-down{
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
}