:root {
    --theme: #311B92;
    --theme-alternative: #6746c3;
}


body {
    color: #443c88;
    background: url(../img/iot_background.png) no-repeat #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.2em;
}

.navbar {
    background-image: -webkit-linear-gradient(top, var(--theme) 0, var(--theme-alternative) 100%);
    background-image: -o-linear-gradient(top, var(--theme) 0, var(--theme-alternative) 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(var(--theme)),to(var(--theme-alternative)));
    background-image: linear-gradient(to bottom, var(--theme) 0, var(--theme-alternative) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=var(--theme), endColorstr=var(--theme-alternative), GradientType=0);
}

.tind-styled.card-header {
    background-color: var(--theme);
}


.btn-light {
    color: var(--theme);    
}

.btn-primary {
    color: var(--white);
    background-color: var(--theme);
    border-color: var(--theme);
}
.btn-primary:hover {
    color: var(--white);
    background-color: var(--theme-alternative);
    border-color: var(--theme-alternative);
}
.btn-check:focus + .btn-primary, .btn-primary:focus {
    color: var(--white);
    background-color: var(--theme-alternative);
    border-color: var(--theme-alternative);
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
    color: var(--white);
    background-color: var(--theme-alternative);
    border-color: var(--theme-alternative);
}
.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-primary:disabled, .btn-primary.disabled {
    color: var(--white);
    background-color: var(--theme);
    border-color: var(--theme);
}

.btn-outline-primary {
    color: var(--theme);
    border-color: var(--theme);
}
.btn-outline-primary:hover {
    color: var(--white);
    background-color: var(--theme);
    border-color: var(--theme);
}
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
    color: var(--white);
    background-color: var(--theme);
    border-color: var(--theme);
}
.btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
.btn-outline-primary:disabled, .btn-outline-primary.disabled {
    color: var(--theme);
    background-color: transparent;
}

.btn-outline-light {
    color: var(--theme);
    border-color: transparent;
}
.btn-outline-light:hover {
    color: var(--white);
    background-color: var(--theme);
    border-color: var(--theme);
}
.btn-check:focus + .btn-outline-light, .btn-outline-light:focus {
    box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
}
.btn-check:checked + .btn-outline-light, .btn-check:active + .btn-outline-light, .btn-outline-light:active, .btn-outline-light.active, .btn-outline-light.dropdown-toggle.show {
    color: var(--white);
    background-color: var(--theme);
    border-color: var(--theme);
}
.btn-check:checked + .btn-outline-light:focus, .btn-check:active + .btn-outline-light:focus, .btn-outline-light:active:focus, .btn-outline-light.active:focus, .btn-outline-light.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
}
.btn-outline-light:disabled, .btn-outline-light.disabled {
    color: var(--theme);
    background-color: transparent;
}

.navbar-brand, .nav-link, .tind-styled.card-header {
    color: var(--white);
}

.navbar .navbar-nav>.active>a, .navbar .navbar-nav>.active>a:focus, .navbar .navbar-nav>.active>a:hover {
    color: var(--white);
}
.navbar .navbar-nav>li>a:focus, .navbar .navbar-nav>li>a:hover, .navbar-brand:hover {
    color: var(--gray-light);
}

.navbar .navbar-nav>li:focus, .navbar .navbar-nav>li:hover {
    background-color: rgba(0, 0, 0, 0.15);
}


.navbar .navbar-nav>.active>a, .navbar .navbar-nav>.open>a {
    background-color: rgba(0, 0, 0, 0.25);
    background-repeat: repeat-x;
    -webkit-box-shadow: inset 0 3px 9px rgba(0,0,0,.075);
    box-shadow: inset 0 3px 9px rgba(0,0,0,.075);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

th {
    padding: 0.5rem !important;
    color: var(--theme);
}

td {
    color: rgba(0,0,0,.54);
    font-weight: 700;
}

.text-theme{
    color: var(--theme);
}

a {
    color: #ff4081;
    font-weight: 500;
    text-decoration: none;
}

.btn-outline-white {
    border-color: transparent;
}

.btn-outline-white:hover {
    color: var(--theme);
    background-color: var(--white);
    border-color: transparent;
}

@media (max-width: 576px){
      .wrap-login {
          width: 400px !important;
      }
}
@media (max-width: 436px){
      .wrap-login {
          width: 300px !important;
      }
}
@media (max-width: 310px){
    .wrap-login {
        width: 250px !important;
    }
}

.pika-single {
    width: 280px;
}

.bg-success-theme {
    background-color: #66bb6a !important;
}

.callout {
    padding: 1.25rem;
    /* margin-top: 1.25rem; */
    /* margin-bottom: 1.25rem; */
    border: 1px solid #e9ecef;
    border-left-color: var(--theme);
    border-left-width: .25rem;
    border-radius: .25rem;
}