// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

body {
    background: url('/oval.svg') #12143c no-repeat right bottom;
    color: #dddddd;
    font-family: 'Nunito', sans-serif;
    font-weight: 200;
    height: 100vh;
    margin: 0;
    padding: 1em 5em;
    font-size: 22px;
}
@media (max-width: 767.98px) {
    body {
        padding: 1em;
        margin: 0;
    }
}

#app {
    margin-bottom: 2em;
}

header .title {
    width: 148px;
    height: 37px;
    font-size: 27px;
    letter-spacing: 0.3px;
    color: #09be67;
}

.repo-item {
    margin: 1em;
    padding: 1em;
    background-color: rgba(255,255,255, 0.05);
    font-size: 1rem;

    h4 {
        font-weight: bold;
    }
    p {
        margin-bottom: 0;
        word-break: break-word !important; //added !important to override line clamp
    }
    a {
        color: #09be67;
    }
    &:hover {
        background-color: rgba(9,190,103, 0.2);
    }
    .additional-details {
        text-align: right;
        color: #a5a4a4;
    }
}

/* Hide the browser's default checkbox */
.repo-item input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.repo-item .checkmark {
  position: absolute;
  top: 50%;
  left: 0;
  height: 35px;
  width: 35px;
  background-color: #12143c;
  border-radius: 50%;
  border: 1px solid #fff;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.repo-item input:checked ~ .checkmark:after {
  display: block;
}

.repo-item > input:checked {
    background-color: rgba(255,190,103, 0.2);
}

/* Style the checkmark/indicator */
.repo-item .checkmark:after {
  left: 11px;
  top: 5px;
  width: 10px;
  height: 17px;
  border: solid #09be67;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.selectedLabel {
    background-color: #b04040;
    padding: 0rem 0.5rem;
    border-radius: 40%;
    color: #fff;
    font-weight: bold;
}

.selectedRepos {
    padding: 0rem 0.5rem;
    border-radius: 5px;
    font-size: 1rem;
    margin: 0 0.3em;
    background: #b04040;
}

.deleteRepos {
    width: 335px;
    height: 73px;
    border-radius: 10px;
    background-color: #b04040;
    font-size: 27px;
    font-weight: bold;
    letter-spacing: 0.3px;
    color: #fff;
    margin: 1em 0;
    border-style: none;
}

.deleteRepos:disabled {
    background-color: #ccc;
}

.dg-btn-loader .dg-circle {
  background-color: green;
}

.margined {
    margin-top: 25%;
}

.deleteConfirm {
    .dg-main-content {
        max-width: 500px;
        background-color: #12143c;
    }

    .dg-title {
        font-size: 25px;
    }

    .dg-content-body--has-title .dg-content {
        font-size: 16px;
    }

    .dg-content-body {
        padding-bottom: 2em;
        color: #fefefe;
    }
    .dg-btn--ok {
        color: #fefefe;
        background-color: #b04040;
        border-color: transparent;
    }
    .dg-btn--cancel {
        color: #09be67;
        background-color: transparent;
        border-color: #09be67;
    }

    .dg-btn-loader .dg-circle {
        background-color: #09be67;
    }
}

.fixed-bottom {
    padding: 0.5em;
    background: #12143c;
}


@media (max-width: 767.98px) {
    body {
        background: #12143c;
    }
    #app {
        .content {
            margin: 1em auto;
        }
        h2 {
            font-size: 1.4rem;
        }
        .repo-item div:nth-child(1) {
            margin: 1em auto;
        }
        .repo-item div:nth-child(2)
        {
            text-align: right;
        }
    }
}