/* Google font url */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;

    --indigo: #4c0bce;
    --blue: #006ac6;
    --cyan: #00c7ca;
    --green: #00ad4e;
    --orange: #ffa536;
    --blush: #ff3c84;
    --red: #ff2121;
}

[data-theme="theme-indigo"] {
    --primary-color: #4c0bce;
}

[data-theme="theme-blue"] {
    --primary-color: #006ac6;
}

[data-theme="theme-cyan"] {
    --primary-color: #00c7ca;
}

[data-theme="theme-green"] {
    --primary-color: #00ad4e;
}

[data-theme="theme-orange"] {
    --primary-color: #ffa536;
}

[data-theme="theme-blush"] {
    --primary-color: #ff3c84;
}

[data-theme="theme-red"] {
    --primary-color: #ff2121;
}

.choose-skin div {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 4px;
}

.choose-skin li:hover div {
    opacity: .6;
}

.choose-skin li.active div::before {
    content: '';
    position: absolute;
    border-radius: 2px;
    width: 14px;
    height: 14px;
    top: 7px;
    left: 7px;
    background-color: var(--bs-white);
}

.choose-skin div:hover {
    cursor: pointer;
}

.choose-skin .indigo {
    background-color: var(--indigo);
}

.choose-skin .blue {
    background-color: var(--blue);
}

.choose-skin .cyan {
    background-color: var(--cyan);
}

.choose-skin .green {
    background-color: var(--green);
}

.choose-skin .orange {
    background-color: var(--orange);
}

.choose-skin .blush {
    background-color: var(--blush);
}

.choose-skin .red {
    background-color: var(--blush);
}


header {
    background-color: var(--primary-color);
    padding: 100px 0;
}


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

/* toggle switch start css */
.tgl {
    display: none;
}

.tgl,
.tgl:after,
.tgl:before,
.tgl *,
.tgl *:after,
.tgl *:before,
.tgl+.tgl-btn {
    box-sizing: border-box;
}

.tgl::-moz-selection,
.tgl:after::-moz-selection,
.tgl:before::-moz-selection,
.tgl *::-moz-selection,
.tgl *:after::-moz-selection,
.tgl *:before::-moz-selection,
.tgl+.tgl-btn::-moz-selection {
    background: none;
}

.tgl::selection,
.tgl:after::selection,
.tgl:before::selection,
.tgl *::selection,
.tgl *:after::selection,
.tgl *:before::selection,
.tgl+.tgl-btn::selection {
    background: none;
}

.tgl+.tgl-btn {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: 0;
    width: 4em;
    height: 2em;
}

.tgl+.tgl-btn:after,
.tgl+.tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
}

.tgl+.tgl-btn:after {
    left: 0;
}

.tgl+.tgl-btn:before {
    display: none;
}

.tgl:checked+.tgl-btn:after {
    left: 50%;
}


/* start: light toggle css */
.tgl-light+.tgl-btn {
    background: var(--bs-gray-200);
    transition: all 0.4s ease;
    border-radius: 2em;
    padding: 2px;
}

.tgl-light+.tgl-btn:after {
    background: var(--bs-white);
    transition: all 0.2s ease;
    border-radius: 50%;
}

.tgl-light:checked+.tgl-btn {
    background: var(--primary-color);
}


/* start: iOS toggle css */
.tgl-ios+.tgl-btn {
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-400);
    transition: all 0.4s ease;
    border-radius: 2em;
    padding: 2px;
}

.tgl-ios+.tgl-btn:after {
    background: var(--bs-white);
    border-radius: 2em;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.tgl-ios+.tgl-btn:hover:after {
    will-change: padding;
}

.tgl-ios+.tgl-btn:active {
    box-shadow: inset 0 0 0 2em var(--bs-gray-400);
}

.tgl-ios+.tgl-btn:active:after {
    padding-right: 0.8em;
}

.tgl-ios:checked+.tgl-btn {
    background: var(--primary-color);
}

.tgl-ios:checked+.tgl-btn:active {
    box-shadow: none;
}

.tgl-ios:checked+.tgl-btn:active:after {
    margin-left: -0.8em;
}

.tgl-ios:disabled+.tgl-btn {
    opacity: .5;
}

/* start:: skewed toggle css */
.tgl-skewed+.tgl-btn {
    background: var(--bs-gray-600);
    overflow: hidden;
    transform: skew(-10deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all 0.2s ease;
    font-family: sans-serif;
}

.tgl-skewed+.tgl-btn:after,
.tgl-skewed+.tgl-btn:before {
    color: var(--bs-white);
    transform: skew(10deg);
    display: inline-block;
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
    position: absolute;
    line-height: 2em;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.tgl-skewed+.tgl-btn:after {
    left: 100%;
    content: attr(data-tg-on);
}

.tgl-skewed+.tgl-btn:before {
    left: 0;
    content: attr(data-tg-off);
}

.tgl-skewed+.tgl-btn:active {
    background: var(--bs-gray-600);
}

.tgl-skewed+.tgl-btn:active:before {
    left: -10%;
}

.tgl-skewed:checked+.tgl-btn {
    background: var(--primary-color);
}

.tgl-skewed:checked+.tgl-btn:before {
    left: -100%;
}

.tgl-skewed:checked+.tgl-btn:after {
    left: 0;
}

.tgl-skewed:checked+.tgl-btn:active:after {
    left: 10%;
}

.tgl-skewed:disabled+.tgl-btn {
    opacity: .5;
}


/* Start: border toggle css */
.tgl-flat+.tgl-btn {
    background: var(--bs-white);
    border: 4px solid var(--bs-gray-200);
    transition: all 0.2s ease;
    padding: 2px;
    border-radius: 2em;
}

.tgl-flat+.tgl-btn:after {
    background: var(--bs-gray-200);
    transition: all 0.2s ease;
    content: "";
    border-radius: 1em;
}

.tgl-flat:checked+.tgl-btn {
    border: 4px solid var(--primary-color);
}

.tgl-flat:checked+.tgl-btn:after {
    left: 50%;
    background: var(--primary-color);
}

.tgl-flat:disabled+.tgl-btn {
    opacity: .5;
}


/* start:  flip togle css  */
.tgl-flip+.tgl-btn {
    transition: all 0.2s ease;
    font-family: sans-serif;
    padding: 2px;
    perspective: 100px;
}

.tgl-flip+.tgl-btn:after,
.tgl-flip+.tgl-btn:before {
    color: var(--bs-white);
    display: inline-block;
    transition: all 0.4s ease;
    text-align: center;
    position: absolute;
    font-weight: bold;
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    line-height: 2em;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 4px;
}

.tgl-flip+.tgl-btn:after {
    content: attr(data-tg-on);
    background: var(--primary-color);
    transform: rotateX(-180deg);
}

.tgl-flip+.tgl-btn:before {
    background: var(--red);
    content: attr(data-tg-off);
}

.tgl-flip+.tgl-btn:active:before {
    transform: rotateX(-20deg);
}

.tgl-flip:checked+.tgl-btn:before {
    transform: rotateX(180deg);
}

.tgl-flip:checked+.tgl-btn:after {
    background: var(--primary-color);
    transform: rotateX(0);
    left: 0;
}

.tgl-flip:checked+.tgl-btn:active:after {
    transform: rotateX(20deg);
}

.tgl-flip:disabled+.tgl-btn {
    opacity: .5;
}