/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');*/

@font-face {
    font-family: 'Poppins';
    src: url('../assets/fonts/Poppins-Regular.ttf');
}


html, body, button, input, textarea {
    font-family: Poppins;
    font-size: 14px;
}

p {
    margin-bottom: 0;
}

.w-90{
    width: 90%;
}

.w-85{
    width: 85%;
}

.w-80{
    width: 80%;
}


.w-40{
    width: 40%;
}

.w-35vh{
    width: 35vh;
}

.vh-90{
height:90vh;
}


.vh-80{
height:80vh;
}

.vh-70{
height:70vh;
}

.vh-60{
height:60vh;
}

.vh-50{
height:50vh;
}

.overflow-y{
    overflow-y: auto !important;
}

.overflow-x{
    overflow-x: auto;
}

.clickable{
    cursor: pointer;
}

.offcanvas-backdrop{
    background-color: rgba(0, 0, 0, 0.2);
    pointer-events: none !important;
    cursor: not-allowed !important;
}

.offcanvas-backdrop.fade.show {
    pointer-events: none !important;
    cursor: not-allowed !important;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-user-drag: none;
    -webkit-user-modify: none;
}

.style-repeat-card{
    display: inline-block;
}

.style-collapsed{
    -webkit-transform: rotateZ(-90deg);
            transform: rotateZ(-90deg);
}

.style-reversed{
    -webkit-transform: rotateZ(-180deg);
            transform: rotateZ(-180deg);
}


.checkbox-aligned{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.style-select-input-savvi{
    border: 1px solid #ced4da;
    border-radius: .25rem;
    padding: 0.5rem;
}

.style-btn-primary-savvi{
    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;

/* Primary Blue/Base */

min-height: 3rem;

background: #049BDA;
border-radius: 30px;

font-family: 'Poppins';
font-style: normal;
font-size: 16px;
font-weight: 600;
line-height: 18px;
/* identical to box height, or 112% */

/* Text/White text */

color: #FFFFFF;

width: 100%;
}

.style-btn-primary-savvi:hover{
    /* Primary Blue/Shade */
    background: #0488C0;
    color: #FFFFFF;
}

.style-btn-primary-savvi:disabled{
    background: rgba(4, 155, 218, 0.5);
    color: #FFFFFF;
}

.style-btn-primary-savvi-minor{
    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;

/* Primary Blue/Base */

padding: 8px 12px;

background: #049BDA;
border-radius: 30px;

font-family: 'Poppins';
font-style: normal;
font-size: 14px;
font-weight: 600;
//line-height: 18px;
/* identical to box height, or 112% */

/* Text/White text */

color: #FFFFFF;

width: 100%;
}

.style-dropdown-savvi-minor{
    color: black;
    background-color: #DDE4E7;
    -webkit-transition: none;
    padding: 8px 28px 8px 12px;
    border-color: #DDE4E7;
    border-radius: 30px;

    font-family: 'Poppins';
    font-style: normal;
    font-size: 14px;
    font-weight: 400;

    width: 100%;
}

.style-dropdown-savvi-minor:hover{
    border-color: #6F7070;
    background-color: white;
    color: black;
    -webkit-transition: none;
}
.style-dropdown-savvi-minor:focus{
    border-color: #6F7070;
    background-color: white;
    color: black;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: none;
}
.style-dropdown-savvi-minor:active{
    border-color: #6F7070;
    background-color: white;
    color: black;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: none;
}
.style-dropdown-savvi-minor::-moz-selection{
    border-color: #6F7070;
    background-color: white;
    color: black;
    -webkit-box-shadow: none;
            box-shadow: none;
    -moz-transition: none;
}
.style-dropdown-savvi-minor::selection{
    border-color: #6F7070;
    background-color: white;
    color: black;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: none;
}

.style-btn-secondary-savvi{
    /* Type=Secondary, State=Default, Icon=Default, Height=40px */
/* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;

/* Background Gray */

min-height: 3rem;

background: #F0F2F2;
border-radius: 2rem;
border-color: #F0F2F2;

font-family: 'Poppins';
font-style: normal;
font-size: 16px;
font-weight: 600;
line-height: 18px;

width: 100%;
}

.style-btn-secondary-savvi:hover{
    background: #E7E7E7;
}

.style-btn-light-savvi{
    /* Type=Secondary, State=Default, Icon=Default, Height=40px */


/* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;

/* Background Gray */

min-height: 3rem;

background: #FFFFFF;
/* Border Gray */

border: 2px solid #dde4e7;
border-radius: 30px;

font-family: 'Poppins';
font-style: normal;
font-size: 16px;
font-weight: 600;
line-height: 18px;

width: 100%;
}

.style-btn-danger-savvi{
    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;

/* Danger */

min-height: 3rem;

background: #EB445A;

border-radius: 30px;

font-family: 'Poppins';
font-style: normal;
font-size: 16px;
font-weight: 600;
line-height: 18px;
/* identical to box height, or 112% */

/* Text/White text */

color: #FFFFFF;

width: 100%;
}

.style-container-bg-blue{
    /* Background Blue */

background: #E6F6FC;
}

.style-bg-blue-savvi{
    background: #049BDA;

}

.style-nav-link{
    color: white;
    margin-bottom: 4px;
    margin-top: 4px;
    padding-top: 18px;
    padding-bottom: 18px
}

.style-nav-item-savvi{
    border-bottom: 4px solid #049bda;
}

.nav-link.active{
    background-color: rgba(255, 255, 255, 0.1);
    border-left: 5px solid white !important;
    border-radius: 0px !important;
}

.nav-link:hover{
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.style-item-savvi:hover{
    background: #E6F5FB;
    color: #049BDA;
}

.style-list-item-savvi-no-hover{
    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
gap: 4rem;

    /* Background Gray */

background: #F0F2F2;
border-radius: 1rem;
margin-bottom: 0.2rem;
margin-left: 1rem;
margin-right: 2rem;
padding: 0.75rem;

}

.style-list-item-savvi{

    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
gap: 4rem;

    /* Background Gray */

background: #F0F2F2;
border-radius: 1rem;
margin-bottom: 0.2rem;
margin-left: 1rem;
margin-right: 2rem;
padding: 0.75rem;

cursor: pointer;
}

.style-list-item-savvi-blue{

    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
gap: 4rem;

    /* Background Blue */

background: #E6F6FC;
border-radius: 1rem;
margin-bottom: 0.2rem;
margin-left: 1rem;
margin-right: 2rem;
padding: 0.75rem;

cursor: pointer;
}

.style-list-item-savvi-dark{

    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
gap: 4rem;

    /* Background Gray */

background: #DDE4E7;
border-radius: 1rem;
margin-bottom: 0.2rem;
margin-left: 1rem;
margin-right: 2rem;
padding: 0.75rem;

cursor: pointer;
}

.style-list-item-savvi-yellow{

    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
gap: 4rem;

    /* Background Yellow */

background: #FFF9E8;
border-radius: 1rem;
margin-bottom: 0.2rem;
margin-left: 1rem;
margin-right: 2rem;
padding: 0.75rem;

cursor: pointer;
}

.style-list-item-savvi-green{

    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
gap: 4rem;

    /* Background Green */

background: #F1F8F5;
border-radius: 1rem;
margin-bottom: 0.2rem;
margin-left: 1rem;
margin-right: 2rem;
padding: 0.75rem;

cursor: pointer;
}

.style-list-item-savvi-pink{

    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
gap: 4rem;

    /* Background Pink */

background: #FEF1F0;
border-radius: 1rem;
margin-bottom: 0.2rem;
margin-left: 1rem;
margin-right: 2rem;
padding: 0.75rem;

cursor: pointer;
}

.style-list-item-savvi-purple{

    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
gap: 4rem;

    /* Background Purple */

background: #F6F2F9;
border-radius: 1rem;
margin-bottom: 0.2rem;
margin-left: 1rem;
margin-right: 2rem;
padding: 0.75rem;

cursor: pointer;
}


.style-list-item-savvi-teal{

    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
gap: 4rem;

    /* Background Light Teal */

background: #F0F9FA;
border-radius: 1rem;
margin-bottom: 0.2rem;
margin-left: 1rem;
margin-right: 2rem;
padding: 0.75rem;

cursor: pointer;
}

.style-list-item-savvi-brown{

    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
gap: 4rem;

    /* Background Reddish Brown */

background: #F6ECEB;
border-radius: 1rem;
margin-bottom: 0.2rem;
margin-left: 1rem;
margin-right: 2rem;
padding: 0.75rem;

cursor: pointer;
}


.style-list-item-savvi:hover{
    /* Border Gray */

    background: #DDE4E7;
}

.style-list-add-item-savvi{

    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
gap: 4rem;
cursor: pointer;

    /* Background Gray */

background: #049BDA;
border-radius: 1rem;
margin-bottom: 0.2rem;
margin-top: 0.2rem;

margin-left: 1rem;
margin-right: 2rem;
padding: 0.75rem;

color: white;
}

.style-list-add-item-savvi:hover{
    /* Border Gray */

    background: #0488C0;
}

.style-list-add-item-savvi-grey{
    
    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
gap: 4rem;
cursor: pointer;

    /* Background Gray */

background: #F0F2F2;
border-radius: 1rem;
margin-bottom: 0.2rem;
margin-left: 1rem;
margin-right: 2rem;
padding: 0.75rem;

color: Black;
}

.style-list-add-item-savvi-grey:hover{
    background: #CED5D9;
}

.style-list-add-item-selected-savvi{
    background: #0488C0 !important;
    border: 0.15rem solid #049bda !important;
}

.style-list-item-empty-savvi{

    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
gap: 4rem;

    /* Background Gray */

background: #F0F2F2;
border-radius: 1rem;
margin-bottom: 0.2rem;
margin-left: 1rem;
margin-right: 2rem;
padding: 0.75rem;
opacity: 50%;
}

.style-tag-secondary-savvi{
    /* Border Gray */

    background: #DDE4E7;
    border-radius: 16px;
    color: #1F2122;
}

.style-tag-primary-savvi{
    background: rgba(4, 155, 218, 0.1);
    border-radius: 16px;
    color: #049BDA;
    padding: 2px 16px;
    font-size: 12px;
}

.style-tag-green-savvi{
    background: rgba(38, 124, 86, 0.1);
    border-radius: 16px;
    color: #267C56;
    padding: 2px 16px;
    font-size: 12px;
}

.style-tag-white-savvi{
    /* Border Gray */
    border: 0.15rem solid #dde4e7;
    border-radius: 16px;
    padding: 3px 16px;
    gap: 8px;
    color: black;
    font-size: 12px;
}

.style-chip-blue-savvi{
    background: #049BDA;
    border-radius: 16px;
    color: White;
    padding: 6.5px 16px;
    margin-right: 1rem;
    font-size: 12px;
    height: 32px;
}

.style-border-selected-savvi{
    border: 0.15rem solid #049bda !important;

}

.style-card-strength-savvi{

    /* Card */
/* Auto layout */
padding: 10px;

    /* Background Green */

background-color: #F1F8F5;
border-radius: 12px;
}

.style-card-weakness-savvi{

    /* Card */
/* Auto layout */
padding: 10px;

    /* Background Pink */

background-color: #FEF1F0;
border-radius: 12px;
}

.style-badge-success-savvi{
    /* Secondary/Green */

position: relative;
top: 5%;
float: right;
right: 5%;

background: #70B596;
border-radius: 10.5px;

font-weight: 600;
font-size: 12px;
line-height: 18px;
/* identical to box height, or 150% */

color: #FFFFFF;
}

.style-badge-failure-savvi{
    /* Secondary/Green */

position: relative;
top: 5%;
float: right;
right: 5%;

/* Secondary/Pink */
background: #F5786C;
border-radius: 10.5px;

font-weight: 600;
font-size: 12px;
line-height: 18px;
/* identical to box height, or 150% */

color: #FFFFFF;
}

.style-card-success-savvi{
    /* Success */

background: #70B596;
border-radius: 12px;
color: white;
}

.style-card-danger-savvi{
/* Danger */

background: #EB445A;
border-radius: 12px;
color: white;
}

.style-box-dashboard-savvi{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 20px;
    gap: 10px;
    background: #FFFFFF;
    /* Border Gray */

    border: 2px solid #dde4e7;
    border-radius: 12px;
}

.style-box-fill-savvi{
    background: #D9D9D9;
    border-radius: 0px 0px 12px 12px;
}

.style-breadcrumb{
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 1px;
    /* Text Colors/Grayed Text */
    color: rgba(31, 33, 34, 0.6);
}

.style-box-skill-savvi{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    
    /* Background Gray */

    background-color: #ffffff;
    border: 2px dashed #dde4e7;
    border-radius: 12px;

    -ms-flex-preferred-size: 250px;

    flex-basis: 250px;
    min-width: 250px;
    min-height: 250px;
    max-width: 250px;
    max-height: 250px;

    cursor: pointer;
}

.style-box-skill-savvi:hover{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    /* Background Gray */

    background: #CED5D9;
    border: 2px dashed #aeb4b7;
    border-radius: 12px;

    vertical-align: middle;
}

.style-box-skill-filled-savvi{
    /* Border Gray */
    background-color: #ffffff;
    border: 2px solid #dde4e7;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    min-width: 250px;
    min-height: 250px;
    max-width: 250px;
    max-height: 250px;

    overflow-y: auto;
    overflow-x: hidden;

    cursor: pointer;
}

.style-box-skill-filled-savvi:hover{
    border-color: #C6CCCF;
}

.style-splitscreen-left-savvi{
    background: #FFFFFF;
    /* simple */

    -webkit-box-shadow: 5px 0px 5px -5px rgba(0, 0, 0, 0.15);

            box-shadow: 5px 0px 5px -5px rgba(0, 0, 0, 0.15);

    height: 90vh;
    width: 50vw;
}

.style-splitscreen-right-savvi{
    /* Background Cloud */
    background: #FAFCFE;
    height: 100vh;
    overflow-y: auto !important;

    width: 50vw;

    -webkit-box-shadow: inset 5px 0px 5px -5px rgba(0, 0, 0, 0.15);

            box-shadow: inset 5px 0px 5px -5px rgba(0, 0, 0, 0.15);
}

.style-missing-savvi{
    color: red;
}

.breadcrumb a{
   color: black;
   text-decoration: none;
}


.tooltip-inner{
    text-align: left;
    font-family: Poppins;
    padding: 10px 16px;
    gap: 24px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

.style-login-bg{
    background-size: cover;
    background-image: url("../assets/images/bg_illustration_login.svg");
    background-repeat: no-repeat;
    background-attachment: local;
    background-position: center;
}


.button-savvi-primary{
    /* Button */


    /* Auto layout */

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0px;

    /* Primary Blue/Base */

    background: #049BDA;
    border-radius: 30px;
    
    font-weight: 600;
}

.card-header{
    background-color: white;
    border: 0px;
}

.style-header-savvi{
    /* Border Gray */

    border: 2px solid #dde4e7;
}

.style-bg-cloud-savvi{
    background: #FAFCFE;
}

.style-small-grouping-savvi {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: start;
                -ms-flex-pack: start;
                    justify-content: flex-start;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
            border-width: 0px;
            text-align: center;
}

.style-selector-status-white {
    border-radius: 100rem !important;
    border: 0.15rem solid #dde4e7;
    background-color: #FFFFFF;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem;  
    font-size: 12px;
}

.style-selector-status-notplanned {
    border-radius: 100rem;
    background-color: #959595;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-planned {
    border-radius: 100rem;
    background-color: #A0A2D6;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}


.style-selector-status-resourcesdefined {
    border-radius: 100rem;
    background-color: #8486BC;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}


.style-selector-status-needsfirstreview {
    border-radius: 100rem;
    background-color: #6DCAF1;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-firstreviewdone {
    border-radius: 100rem;
    background-color: #7AFBC2;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}


.style-selector-status-needsfirstreviewupdate {
    border-radius: 100rem;
    background-color: #FF7D8E;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}


.style-selector-status-needssecondreview {
    border-radius: 100rem;
    background-color: #51B4DD;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}


.style-selector-status-needssecondreviewupdate {
    border-radius: 100rem;
    background-color: #FB6579;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}


.style-selector-status-needsfinalreview {
    border-radius: 100rem;
    background-color: #11A7E5;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}


.style-selector-status-needsfinalreviewupdate {
    border-radius: 100rem;
    background-color: #EB445A;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}


.style-selector-status-finalreviewdone {
    border-radius: 100rem;
    background-color: #4DD298;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-needsfinaltargetgroupcheck {
    border-radius: 100rem;
    background-color: #EF7E16;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-needsproofread {
    border-radius: 100rem;
    background-color: #008FCB;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-proofread {
    border-radius: 100rem;
    background-color: #40C189;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-orderaudio {
    border-radius: 100rem;
    background-color: #FFDB75;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-waitingforaudio {
    border-radius: 100rem;
    background-color: #FEC010;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-readyforvideo {
    border-radius: 100rem;
    background-color: #EE74E9;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-needsvideoreview {
    border-radius: 100rem;
    background-color: #0488C0;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-needsvideoreviewupdate {
    border-radius: 100rem;
    background-color: #D63A4E;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-videoreviewdone {
    border-radius: 100rem;
    background-color: #38B47E;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-needsupload {
    border-radius: 100rem;
    background-color: #B43FAF;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-needsappreview {
    border-radius: 100rem;
    background-color: #006F9E;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-needsappreviewupdate {
    border-radius: 100rem;
    background-color: #AF2738;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-appreviewdone {
    border-radius: 100rem;
    background-color: #31A773;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-final {
    border-radius: 100rem;
    background-color: #267C56;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-needsupdate {
    border-radius: 100rem;
    background-color: #FF0000;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-text-green {
    border-radius: .25rem;
    background-color: #F1F8F5;
    border-color: #70B596;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-text-yellow {
    border-radius: .25rem;
    background-color: #FFF9E8;
    border-color: #FEC010;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-text-pink {
    border-radius: .25rem;
    background-color: #FEF1F0;
    border-color: #F5786C;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-selector-status-text-blue {
    border-radius: .25rem;
    background-color: #E6F6FC;
    border-color: #049BDA;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;  
}

.style-list-savvi {
    margin-bottom: 0.2rem;
    margin-left: 1rem;
    margin-right: 2rem;
    padding: 0.75rem;
    background-color: #F0F2F2;
    border-width: 7px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    }

.style-list-item-notplanned-border-savvi {
    border-right: 1rem solid #959595 !important;
}

.style-list-item-planned-border-savvi {

    border-right: 1rem solid #a0a2d6 !important;
}

.style-list-item-resourcesdefined-border-savvi {

    border-right: 1rem solid #8486bc !important;
}

.style-list-item-needsfirstreview-border-savvi {

    border-right: 1rem solid #6dcaf1 !important;
}

.style-list-item-firstreviewdone-border-savvi {

    border-right: 1rem solid #7afbc2 !important;
}

.style-list-item-needsfirstreviewupdate-border-savvi {

    border-right: 1rem solid #ff7d8e !important;
}

.style-list-item-needssecondreview-border-savvi {

    border-right: 1rem solid #51b4dd !important;
}

.style-list-item-needssecondreviewupdate-border-savvi {

    border-right: 1rem solid #fb6579 !important;
}

.style-list-item-needsfinalreview-border-savvi {

    border-right: 1rem solid #11a7e5 !important;
}

.style-list-item-needsfinalreviewupdate-border-savvi {

    border-right: 1rem solid #eb445a !important;
}

.style-list-item-finalreviewdone-border-savvi {

    border-right: 1rem solid #4dd298 !important;
}

.style-list-item-needsfinaltargetgroupcheck-border-savvi {

    border-right: 1rem solid #ef7e16 !important;
}

.style-list-item-needsproofread-border-savvi {

    border-right: 1rem solid #008fcb !important;
}

.style-list-item-proofread-border-savvi {

    border-right: 1rem solid #40c189 !important;
}

.style-list-item-orderaudio-border-savvi {

    border-right: 1rem solid #ffdb75 !important;
}

.style-list-item-waitingforaudio-border-savvi {

    border-right: 1rem solid #fec010 !important;
}

.style-list-item-readyforvideo-border-savvi {

    border-right: 1rem solid #ee74e9 !important;
}

.style-list-item-needsvideoreview-border-savvi {

    border-right: 1rem solid #0488c0 !important;
}

.style-list-item-needsvideoreviewupdate-border-savvi {

    border-right: 1rem solid #d63a4e !important;
}

.style-list-item-videoreviewdone-border-savvi {

    border-right: 1rem solid #38b47e !important;
}

.style-list-item-needsupload-border-savvi {

    border-right: 1rem solid #b43faf !important;
}

.style-list-item-needsappreview-border-savvi {

    border-right: 1rem solid #006f9e !important;
}

.style-list-item-needsappreviewupdate-border-savvi {

    border-right: 1rem solid #af2738 !important;
}

.style-list-item-appreviewdone-border-savvi {

    border-right: 1rem solid #31a773 !important;
}

.style-list-item-final-border-savvi {

    border-right: 1rem solid #267c56 !important;
}

.style-list-item-needsupdate-border-savvi {

    border-right: 1rem solid #ff0000 !important;
}

.style-list-item-header-savvi{

        /* Auto layout */

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    gap: 2rem;

        /* Background Gray */

    border-radius: 1rem;
    margin-bottom: 0.5rem !important;
    margin-left: 1rem;
    margin-right: 2rem;
    padding: 0.25rem;

            /* Border Blue */

    border-right: 1rem solid #ffffff !important;
}

.style-inputField-white-savvi{
    /* Border Gray */
    border: 0.15rem solid #dde4e7;
    border-radius: 4px;
    padding: 3px 8px;
    color: black;
    font-size: 12px;
}

.reviewInputField{
    padding-left: 1px !important;
    padding-right: 1px !important;
}

.dropdown-toggle::before {
    display: none;
    border: none!important
}

.simpleHeader{
    background-color: white;
    border-bottom: 2px solid;
    border-color: #dde4e7;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.microtrainingPreviewCard{
    margin-right: 1rem;
    min-width: 20vw;
    width: 20vw;
    margin-bottom: 1rem;
}
.microtrainingPreviewTranscriptionCard{
    margin-right: 1rem;
    min-width: 40.75vw;
    width: 40.75vw;
    margin-bottom: 1rem;
}

.imageSilentClassForHover{

}

.imageSilentClassForHover:hover{
    background-color: #CED5D9;
}

.preview-edit-button{
    color: black;
}
.preview-edit-button:hover{
    color: #049BDA !important;
}


.style1{
    background-size: cover;
    background-image: url("../assets/images/bg_blue.svg");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.style2 {
    margin-bottom: 0px !important;
}

.style3{
    background-size: auto;
    background-image: radial-gradient(circle, black 100%, white 100%);
}

.style4{
    background-image: url("../assets/images/icon_ellipsis_active.svg");
    background-attachment: local;
    background-size: contain;
    background-repeat: no-repeat;
}

.textBox {
  -webkit-transform: translateX(0);
  -webkit-transition: 2s;
}

.textBox:hover {
  -webkit-transform: translateX(calc(23vw - 100%));
}

.style5 {
    border-top-left-radius: 93px;
    border-top-right-radius: 93px;
    border-bottom-left-radius: 93px;
    border-bottom-right-radius: 93px;
}

.style-switch-savvi {
    background-color: #DDE4E7;
    border-width: 0px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    height: 20px !important;
    width: 40px !important;
    margin-top: 0px;
    margin-right: 8px;
    margin-left: -31.5px !important;
}
.style-switch-savvi:checked {
    background-color: #049BDA;
    border-width: 0px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.style-comment-other {
    margin-right: 50px;
    margin-left: 0px;
    background-color: #e6f6fc;
    border-top-left-radius: 0px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    padding: 8px;
}

.style-comment-user {
    margin-right: 0px;
    margin-left: 50px;
    background-color: #F1F8F5;
    border-top-left-radius: 16px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    padding: 8px;
}

.style-list-notes {
    background-color: #f0f2f2;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 8px;
}

.style-side-navigation-main {
    height: 40px;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    padding-left: 20px;
    padding-right: 12px;
    text-align: left;
    font-size: 14px;
    border-radius: 0px;
}
.style-side-navigation-main:hover{
    background-color: #E6F5FB;
}

.style-side-navigation-minor {
    height: 40px;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 48.5px;
    padding-right: 12px;
    text-align: left;
    font-size: 14px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.style-side-navigation-minor:hover{
    background-color: #E6F5FB;
}

.style-side-navigation-minor-selected {
    height: 40px;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 48.5px;
    padding-right: 12px;
    text-align: left;
    font-size: 14px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    background-color: #E6F5FB;
    color: #12A0DC;
}

.style-side-navigator-dropdown {
    background-color: #E6F5FB;
    -webkit-text-fill-color: #000000;
    margin-top: 42px;
    margin-bottom: 35px;
    border: 0px;
    color: #000000;
    height: 40px;
    width: 13vw;
    border-radius: 8px;
    line-break: auto;
}

.style-side-navigator-dropdown:hover {
    background-color: #E6F5FB;
    color: #049BDA;
    -webkit-text-fill-color: #049BDA;
}

.style-side-navigator-dropdown:focus {
    background-color: #E6F5FB;
    -webkit-text-fill-color: #049BDA;
    margin-top: 42px;
    margin-bottom: 35px;
    border: 0px;
    color: #049BDA;
    border-radius: 8px;
    border-color: #E6F5FB;
    outline: none !important;
    -webkit-box-shadow: none;
            box-shadow: none;
}
.style-side-navigator-dropdown:active {
    background-color: #E6F5FB;
    -webkit-text-fill-color: #049BDA;
    margin-top: 42px;
    margin-bottom: 35px;
    border: 0px;
    color: #049BDA;
    border-radius: 8px;
    border-color: #E6F5FB;
    outline: none !important;
    -webkit-box-shadow: none;
            box-shadow: none;
}

.style-side-navigation-main-selected {
    height: 40px;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    padding-left: 20px;
    padding-right: 12px;
    text-align: left;
    font-size: 14px;
    border-radius: 0px;
    background-color: #E6F5FB;
    color: #12A0DC;
}
.style-side-navigation-main-selected:hover {
    height: 40px;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    padding-left: 20px;
    padding-right: 12px;
    text-align: left;
    font-size: 14px;
    border-radius: 0px;
    background-color: #E6F5FB;
    color: #12A0DC;
}

.style-side-navigator-droppeddown {
    padding-top: 8px;
    padding-bottom: 8px;
    border-width: 0px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.15);
            box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.15);
    
    padding-left: 0px !important;
    padding-right: 0px !important;
    width: 215px;
}
.style-side-navigator-droppeddown-selections {
    padding-top: 9.5px !important;
    padding-bottom: 9.5px !important;
    padding-left: 16px; 
}

.style-scroll-bottom-border {
    border-bottom-width: 3px;
    border-color: #000; 
}
.style-scroll-top-border {
    border-top-width: 3px;
    border-color: #000;
}

.style-dropdown-savvi{
    color: black;
    background-color: #DDE4E7;
    -webkit-transition: none;
    padding: 8px 24px;
    border-color: #DDE4E7;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
.style-dropdown-savvi:hover{
    border-color: #6F7070;
    background-color: white;
    color: black;
    -webkit-transition: none;
}
.style-dropdown-savvi:focus{
    border-color: #6F7070;
    background-color: white;
    color: black;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: none;
}
.style-dropdown-savvi:active{
    border-color: #6F7070;
    background-color: white;
    color: black;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: none;
}
.style-dropdown-savvi::-moz-selection{
    border-color: #6F7070;
    background-color: white;
    color: black;
    -webkit-box-shadow: none;
            box-shadow: none;
    -moz-transition: none;
}
.style-dropdown-savvi::selection{
    border-color: #6F7070;
    background-color: white;
    color: black;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: none;
}
.style-dropdown-savvi:{
    border-color: #6F7070;
    background-color: white;
    color: black;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: none;
}

.style-mt-trainingstructure-savvi{

    /* Auto layout */

display: -webkit-box;

display: -ms-flexbox;

display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
gap: 1rem;

    /* Background Gray */

background: #F0F2F2;
border-radius: 1rem;
margin-bottom: 0.2rem;
margin-left: 1rem;
margin-right: 2rem;
padding: 0.75rem;
}

.style-mthub-reviewer-select{
    padding: 1px;
    background: none;
}

.style-mthub-reviewer-select::-ms-expand {
    display: none;
}

.style-mthub-search-header {
    width: 2.1vw;
    font-size: 11px;
    padding: 2px;
}

.style-button-category-selector {
    border-radius: 4px;
    border: 1px solid var(--border-gray, #dde4e7);
    background: var(--text-colors-white-text, #FFF);

    overflow: hidden;
    color: var(--text-colors-main-text, #1F2122);
    text-overflow: ellipsis;

    font-size: 12px;
}

.style-dropdown-category-selector {
    border-width: 1px;
    border-color: #dde4e7;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: #fff;
    margin-top: 4px;
    padding: 12px 8px 8px;
}

#container .ck.ck-editor {
    width: 100%;
}

#sidebar {
    width: 300px;
    padding: 0 10px;
}

.ck-editor__editable {
    min-height: 100px;
    /*max-height: 400px;*/
}

.tagify-basic-styling {
    border-radius: 4px;
    border-color: #DDE4E7;
    border-width: 1px;
    min-height: 51px;
    width: 100%;

    //--tag-bg: #DDE4E7;
    //--tag-border-radius: 32px;
    //--tag-border-color: #DDE4E7;

    --tag-bg                  : #DDE4E7;
    --tag-hover               : #C6CCCF;
    --tag-text-color          : #000000;
    --tags-border-color       : silver;
    --tag-border-radius       : 25px;
    --tag-text-color--edit    : #111;
    --tag-remove-bg           : var(--tag-hover);
    //--tag-pad                 : .6em 1em;
    --tag-inset-shadow-size   : 2em;
    --tag-remove-btn-bg--hover: black;
    

}

.tagify-basic-styling .tagify__tag {
    height: 41px;
    padding: 10px
}

.matching-pairs-side-container {
    padding: 4px;
    border: 1px solid #dde4e7;
    background-color: #f0f2f2;
    border-radius: 4px;
}

.style-gap-text-gap-red-savvi{
    /* Border Gray */
    border: 0.15rem solid #dde4e7;
    border-radius: 4px;
    padding: 3px 8px;
    color: black;
    background-color: #ffbeb9;
    font-size: 12px;
    margin: 2px;
}

.style-gap-text-gap-green-savvi{
    /* Border Gray */
    border: 0.15rem solid #dde4e7;
    border-radius: 4px;
    padding: 3px 8px;
    color: black;
    background-color: #c9ffe8;
    font-size: 12px;
    margin: 2px;
}

.style6 {

}

/* Base styles */
#microtraining_card_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Start with 3 columns */
  grid-gap: 2px;
  overflow-y: scroll;
  height: 70%;
  max-width: 100%;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content;
  padding: 0.5rem;
  background-color: rgba(241, 241, 241, 0.377);
}

/* Media query for smaller screens - adjust for 2 columns */
@media (max-width: 1400px) {
  #microtraining_card_grid {
    grid-template-columns: repeat(2, 1fr); /* Now we have 2 columns */
  }
}

/* Media query for even smaller screens - adjust for 1 column */
@media (max-width: 1000px) {
  #microtraining_card_grid {
    grid-template-columns: 1fr; /* Only 1 column */
  }
}

#collapse_userlist {
    background-color: rgb(201, 201, 201);
}

.style-list-item-mt-hub-restyling {
    
    display: -webkit-box;
    
    display: -ms-flexbox;
    
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    
    -webkit-box-pack: center;
    
        -ms-flex-pack: center;
    
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

        /* Background Gray */

    background: #F0F2F2;
    width: 100%;
    margin-bottom: .3rem;
    gap: .5rem;

        /* Border Pink */

    border-radius: .3rem;
    border-right: 1rem solid #6dcaf1;
}