:root {
  --bluish-violet:#673de6;
  --slate-gray:	#1e293b; 
  --midnight-blue: #0f172a;
  --whisper-lavender : #faf5ff;
  --cool-gray:#f0f4f9;
  --ghost-white: #F9FAFB;
  --soft-gray-blue: #D0D5DC;

  --emerald-soft: rgba(0,186,124,0.1);
  --rose-soft: rgba(249,24,128,0.1);
  --sky-soft: rgba(29,155,240,0.1);
  --amber-soft: rgba(245, 158, 11, 0.1);
  --fuchsia-soft: rgba(217, 70, 239, 0.1);
  --emerald: rgb(0,186,124);
  --rose: rgb(249,24,128);
  --sky: rgb(29,155,240);
  --amber: rgba(245, 158, 11);
   --fuchsia: rgba(217, 70, 239);

  --indigo-rgb: 99, 102, 241;
  --indigo-300: rgba(var(--indigo-rgb), 0.3);
  --indigo-150: rgba(var(--indigo-rgb), 0.15);
  --indigo-80:  rgba(var(--indigo-rgb), 0.08);
  --indigo-50:  rgba(var(--indigo-rgb), 0.05);
  --white-90: rgba(255, 255, 255, 0.9);
  --red: #FECACA;
  --red-soft: #FFFAFA; 
  --red-dark: #7F1D1D; 

  --backdrop: rgba(0,0,0, 0.5);
  --shadow: 0 4px 6px var(--indigo-150), 0 10px 20px var(--indigo-80);

    /*only for style link*/
    --cs-shadow: 0 0.5rem 1rem %s;
    --cs-shadow-lg: 0 1rem 3rem %s;
    --cs-shadow-sm: 0 0.125rem 0.25rem %s;
    --cs-shadow-inset: inset 0 1px 2px %s;
}

/*Font Face*/
@font-face {
  font-family: 'Nunito-Regular';
  src: url('/src/public/asset/fonts/Nunito-Regular.ttf');
}

@font-face {
  font-family: 'Quicksand-Bold';
  src: url('/src/public/asset/fonts/Quicksand-Bold.ttf');
} 

.fs-0 {
    font-size: 0px !important;
}

/*body section*/
body {
  font-family: 'Nunito-Regular';
  background-color: var(--cool-gray);
}

/*Coloring*/
.icon-emerald {
  background: var(--emerald-soft);
  color: var(--emerald);
}

.icon-rose {
  background: var(--rose-soft);
  color: var(--rose);
}

.icon-sky {
  background: var(--sky-soft);
  color: var(--sky);
}

.icon-amber {
  background: var(--amber-soft);
  color: var(--amber);
}

.icon-fuchsia {
  background: var(--fuchsia-soft);
  color: var(--fuchsia);
}


.sky-color{
    color: var(--sky);
}

.rose-color{
    color: var(--rose);
}

.bg-white-90 {
    background-color: var(--white-90);
}

.bg-cool-gray{
    background-color: var(--cool-gray);
}

.bg-ghost-white{
    background-color: var(--ghost-white);
}

.bg-bluish-violet{
    background-color: var(--bluish-violet);
}

.bg-midnight-blue{
    background-color: var(--midnight-blue);
}

.bg-whishper-lavender{
    background-color: var(--whisper-lavender);
}

.bg-backdrop{
    background-color: var(--backdrop);
}

.bg-soft-gray-blue{
    background-color: var(--soft-gray-blue);
}

.bg-backdrop-0{
    background-color:rgba(0,0,0, 0.0);
}

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

.midnight-blue-color {
  color: var(--midnight-blue);
}

.slate-gray-color {
  color: var(--slate-gray);
}

.bluish-violet-color{
    color: var(--bluish-violet);
}

.emerald-color{
    color: var(--emerald);
}

/*Fonts*/
.font-quicksand-bold {
    font-family: 'Quicksand-Bold';
}

/*Sizing*/
.min-height-550{
    min-height: 550px;
}

.min-height-250{
    min-height: 250px;
}

.max-height-250{
    max-height: 250px;
}

.min-height-200{
    height: 200px;
}

/*shadow*/
.shadow-indigo-mixed{
    box-shadow: var(--shadow);
}

/*Button*/
.btn-1, 
.btn-2, 
.btn-2 i{
    color: var(--slate-gray);
}

.btn-1 i{
    color: var(--bluish-violet);
}

.btn-3{
    background-color: var(--midnight-blue);
}

.btn-3,
.btn-3 i{
    color: var(--whisper-lavender);
}

.btn-4{
    color: var(--rose);
    border: 1px solid var(--rose);
}


.btn-4:hover{
    background-color: var(--rose);
    color: var(--ghost-white);
}

.btn-5{
    color: var(--sky);
    border: 1px solid var(--sky);
}

.btn-5:hover{
    background-color: var(--sky);
    color: var(--ghost-white);
}

.btn-1, 
.btn-2,
.btn-3,
.btn-4, 
.btn-5,
.btn-1 i,
.btn-2 i,
.btn-3 i{
    transition: cubic-bezier(.47,0,.74,.71) 0.3s;
    cursor: pointer;
}

.btn-1:hover,
.btn-2:hover,
.btn-3:hover{
  background-color: var(--bluish-violet)!important;
  box-shadow: var(--shadow);
}

.btn-1:hover, 
.btn-2:hover, 
.btn-3:hover, 
.btn-1:hover i,
.btn-2:hover i{
    color: var(--whisper-lavender) !important;
}

.active-btn-1{
    background-color: var(--whisper-lavender) !important;
    color: var(--bluish-violet);
}

/*z-index*/
.z-index-user-top-nav{
    z-index:1022;
}

.z-index-user-styling-prev {
    z-index: 4;
}

.z-index-dropdown-menu {
    z-index: 3;
}

.z-index-backdrop{
    z-index: 1;   
}

/*trasisition*/
#backdrop{
    transition: ease-in 0.2s;
}

/*Padding*/
.p-c1 {
    padding:0.5rem 0.344rem;
}


.border-dashed { border-style: dashed !important; }
.border-dotted { border-style: dotted !important; }
.border-double { border-style: double !important; }

.text-justify { text-align: justify;}

/*Custom styling*/
    /*Styling for personal link*/
        /*link thumbnail size*/
            .thumb-32{
            width: 32px;
            height: 32px;
            }

            .thumb-40{
            width: 40px;
            height: 40px;
            }

            .thumb-48{
                width: 48px;
                height: 48px;
            }

            .thumb-56{
                width: 56px;
                height: 56px;
            }
    
    /*From Control Field*/
        .form-control-invalid{
            color: var(--red-dark);
            background-color: var(--red-soft) !important;
            border: solid 1px var(--red);
        }

        .shake {
            animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
            transform: translate3d(0, 0, 0);
        }

        @keyframes shake {
            10%, 90% { transform: translate3d(0, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }

    /*Toast*/
        .toast-container{
            z-index:1056;
        }

        #live-toast{
            background: var(--slate-gray);
            color: var(--cool-gray);
            box-shadow: var(--shadow);
        }

    /*bg -mage*/
        .bg-img-1{
            background-image: url('/src/public/asset/images/system/her_bg.png');
        }

        .bg-img-2{
            background-image: url('/src/public/asset/images/system/her_2_bg.png');
        }

        .bg-p-top{
            background-position: top;
        }

        .bg-p-bottom{
            background-position: bottom;
        }

        .bg-img-base{
            background-repeat: no-repeat;
            background-size: cover;
        }

        .bg-bio-prev-force-height {
            height: 155px;
        }

        .bg-bio-container img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }

        .bg-bio-container {
            height: 200px;
            overflow: hidden;
        }

        .h-200 {
            height: 145px;
            min-height: 145px;
            max-height: 145px;
        }
    /*Callout*/
        .callout {
            padding: 0.456rem 0.556rem;
            border: solid 1px;
            border-left-width: 0.50rem;
            border-radius: 0.35rem;
            line-height: 1.2;
            font-size: 0.856rem;
        }

        .callout-info {
            border-color: var(--sky);
        }

        .callout-warning {
            border-color: var(--amber);
        }

        .callout-danger {
            border-color: var(--rose); 
        }

    /*Terms*/
        .terms-section{
            overflow-y: auto;
            height: 300px;
            padding-right: 8px;
        }

    /*Url list*/
        .parent-link, 
        .parent-link button{
            transition: ease-in-out 0.2s;
        }

        .parent-link:hover{
            transform: scale(1.02);
            box-shadow: var(--shadow);
        }

        .parent-link button:hover{
            background-color: rgba(255, 255, 255, 0.40);
        }

        .cs-h-100{
            height: 560px;
        }

        .cs-h-100::-webkit-scrollbar{
            width: 1px;
        }

        .cs-h-200{
            height: 620px;
        }
                

        @media screen and (max-width:767px) {
            .cs-h-100{
                height: 280px;
            }

            .rounded-top-sm-0 {
                border-top-left-radius: 0px !important;
                border-top-right-radius: 0px !important;
            }

            .rounded-bottom-sm-0 {
                border-bottom-left-radius: 0px !important;
                border-bottom-right-radius: 0px !important;
            }
        }

        @media screen and (min-width:768px) {
            .rounded-left-md-0 {
                border-top-left-radius: 0px !important;
                border-bottom-left-radius: 0px !important;
            }

            .rounded-right-md-0 {
                border-top-right-radius: 0px !important;
                border-bottom-right-radius: 0px !important;
            }
        }

        /*Cookie*/
        #cookie-open-dialog-trg {
            max-width: 59px;
            max-height: 69px;
            bottom: 65px;
            right: 25px;
            z-index: 2;
        }
/*Custom styling*/

/*Bootstrap overriding section*/
a {
  color: var(--bluish-violet);
  text-decoration: dotted underline 0.0625em var(--bluish-violet);
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23b29df2'/%3e%3c/svg%3e");
}

.form-control:disabled{
  background-color: var(--cool-gray);
}

.form-control,
.form-select,
.input-group-text{
    background-color: var(--ghost-white);
    color: var(--midnight-blue);
    font-size: 0.80rem;
} 

.form-check-input:checked{
    background-color: var(--bluish-violet);
    border-color: var(--bluish-violet);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    outline: 0;
    border-color: var(--bluish-violet);
}

.form-check-input:focus{
    box-shadow: var(--shadow);
}

.form-control:focus,
.form-select:focus,
.form-control.is-valid:focus{
  box-shadow: var(--shadow);
  background-color: var(--ghost-white) !important;
}

.invalid-feedback > ul {
  margin-left: 22px !important;
}

.accordion-button::after {
    width: 14px !important;
    height: 14px !important;
    background-size: 14px !important;
}

.dropdown-menu{
    max-height: 200px;
    overflow-y: auto;
}

.dropdown-item:hover,
.dropdown-item:active{
    color: var(--bluish-violet);
    background-color: var(--whisper-lavender);
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
  height: 2.6rem;
  min-height: 2.6rem;
  line-height: 1;
}

.form-floating textarea {
    min-height: 5rem !important;
}

.form-floating > label {
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
  transform: scale(0.8) translateY(-0.38rem) translateX(0.15rem);
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 1.4rem;
  padding-bottom: 0.4rem;
}

.form-floating > textarea:focus ~ label::after, 
.form-floating > textarea:not(:placeholder-shown) ~ label::after {
    background-color: transparent;
}

.form-floating > .form-select {
  padding-top: 1.4rem;
  padding-bottom: 0.4rem;
}

.form-switch, .form-check{
  padding-left: 0;
}

.form-control:read-only {
  background-color: var(--cool-gray);
  color: #999;
}

.btn.active{
    background-color: var(--bluish-violet) !important;
}
/*Bootstrap overriding section*/