/**
 * Hawke AI Random Roller
 * Main Cascading Style Sheet Document
 * Version: 2.0
 * Last Updated: 2021-09-03
 */

 body {
    background-color: #f8f9fa;
    overflow: hidden;
}

/* loading overlay */
#rr_start {
    z-index: 10000;
    position: absolute;
    height: 120%;
    width: 100%;
    margin: -20px 0;
}
#rr_start_logo { margin-top: 10em; }
#rr_start_logo img { width: 128px; }
#rr_start_logotype { margin-top: 2em; font-weight: bold; font-size: 2em;}
#rr_start_version { font-size: 0.8em; }
#rr_start_nojs { margin-top: 5em; }
#rr_start_loading { margin-top: 5em; display: none; }
#rr_start_error { 
    position: absolute; 
    top: 40%; 
    width: 70%; 
    margin-left: 15%;
    border-radius: 0.5rem;
    display: none;
}
#rr_start_copyright { position: absolute; width: 100%; bottom: 12%; }
#rr_strings { display: none;}

/* on a small screen we fill out the screen */
.min-vh-95 { 
    min-height: 100vh!important;
}
.rr-rounded-corners {
    border-radius: 0;
}
.rr-title {
    border-radius: 0;
    height: 60px;
    overflow: hidden;
    font-weight: bold;
    font-size: 1.3em;
    margin-top: -5px;
}
.rr-title img {
    height: 24px;
}
.rr-body {
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}
.rr-copyright {
    font-size: 0.8em;
    height: 30px;
    overflow: hidden;
    border-radius: 0;;
}

.rr-copyright a:link, .rr-copyright a:visited { color: #fff; }
.rr-copyright a:hover, .rr-copyright a:active { text-decoration: none; }
.rr-button {
    min-width: 311px;
    max-width: 400px;
}
.rr-dice-roll {
    max-width: 3em;
    width: auto;
    margin: 0;
    margin-left: calc(50% - 1.5em);
}
/* these commands are from https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp */
input.rr-dice-roll::-webkit-inner-spin-button, input.rr-dice-roll::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number].rr-dice-roll { -moz-apperance: textfield; }

#dice_space { display: none; }
input.roll-is-invalid {
    border-color: red;
    color: red;
}

/* named layers with actions */
#title_norm { display: inline-block; }
#title_tiny { display: none; }
#mode_buttons {
    margin-top: -5px;
}
#mode_auto, #mode_dice { display: none; width: 46px; }
#rr_form { display: none; }

.rr-welcome-button {
    margin-top: 3rem;
}
#pw_complete_msg { display: none; }
.copy-badge {
    position: absolute;
    border-radius: 0.5em;
    width: 80%;
    margin-left: 5%;
    opacity: 0.8;
    display: none;
}

/* about pages */
#rr_body_right_col { display: none; }
#about_patterns, #about_custom_patterns, #about_dice { display: none;}
/* about page links */
span.rr-about {
    color: #007bff;
    cursor: pointer;
    text-decoration: none;
}
i.rr-about { cursor: pointer; }
i.rr-about:hover, span.rr-about:hover {
    text-decoration: underline;
    color: #0056b3;
}
.rr-copyright span.rr-about { color: white; }
.rr-copyright span.rr-about:hover { 
    color: white; 
    font-weight: bold; 
    text-decoration: none; 
}

/* form stuff */
#result textarea { 
    border: none; 
    resize: none;
    outline: none;
    box-shadow: none;
}

/* default setup for form is dice roll */
#cpattern, #auto_button, #save_button { display: none; }

/* text sizing */
.text-xxlarge { font-size: 2.0em; }
.text-xlarge { font-size: 1.6em; }
.text-large { font-size: 1.2em; }
.text-small { font-size: 0.8em; }
.text-timy { font-size: 0.6em; }


@media (min-width: 768px) {
    #rr_body_right_col { 
        border-left: 1px solid;
    }    
    .min-vh-95 {
        min-height: 95vh!important;
    }
    .rr-rounded-corners {
        border-radius: 0.5rem;
    }
    .rr-title {
        border-radius: 0.45rem 0.45rem 0 0;
    }
    .rr-copyright {
        border-radius: 0 0 0.45rem 0.45rem;
    }
}

@media (max-width: 411px) {
    #title {
        font-size: 0.8em;
        margin-left: -15px;
    }
}

@media (max-width: 359px) {
    #title { 
        margin-left: -15px;
    }
    #title_tiny { display: inline-block; }
    #title_norm { display: none; }
    .rr-button { min-width: 0;  width: 250px; } 
    #dice_rolls .col {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* handle the Galaxy fold (WHY???) */
@media (max-width: 290px) {
    .rr-button { width: 200px; }
}