@import url(base.css);
@import url(base_refactor.css);

:root {
  --primary: #79aec8;
  --secondary: #417690;
  --accent: #f5dd5d;
  --primary-fg: #fff;
  --primary-color: #00a2e8;

  --body-fg: #333;
  --body-bg: #fff;
  --body-quiet-color: #666;
  --body-loud-color: #000;

  --header-color: #ffc;
  --header-branding-color: var(--accent);
  --header-bg: var(--secondary);
  --header-link-color: var(--primary-fg);

  --breadcrumbs-fg: #c4dce8;
  --breadcrumbs-link-fg: var(--body-bg);
  --breadcrumbs-bg: var(--primary);

  --link-fg: #447e9b;
  --link-hover-color: #036;
  --link-selected-fg: #5b80b2;

  --hairline-color: #e8e8e8;
  --border-color: #ccc;

  --error-fg: #ba2121;

  --message-success-bg: #dfd;
  --message-warning-bg: #ffc;
  --message-error-bg: #ffefef;

  --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
  --selected-bg: #e4e4e4; /* E.g. selected table cells */
  --selected-row: #ffc;

  --button-fg: #fff;
  --button-bg: var(--primary);
  --button-hover-bg: #609ab6;
  --default-button-bg: var(--secondary);
  --default-button-hover-bg: #205067;
  --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
  --close-button-hover-bg: #747474;
  --delete-button-bg: #ba2121;
  --delete-button-hover-bg: #a41515;

  --object-tools-fg: var(--button-fg);
  --object-tools-bg: var(--close-button-bg);
  --object-tools-hover-bg: var(--close-button-hover-bg);
}

#phone_inp_form {
    display: flex;
}

#phone_numb {
    margin-right: 1vw;
    width: 192px;
    min-width: 100px;
}

#phone_sbm, .button_zakaz, .check_code_button, #chng_prof_set, #dopolnitelnie_polya_btn {
    cursor: pointer;
    border-top: 1px solid #00a2e8;
    /* border-radius: var(--checkbox-captcha-border-radius, 11px) !important; */
    border-radius: unset !important;
    background: -webkit-gradient(linear,left top,left bottom,from(#00a2e8),to(#00a2e8));
    background: -moz-linear-gradient(top,#00a2e8,#00a2e8);
    background: -ms-linear-gradient(top,#00a2e8,#00a2e8);
    background: -o-linear-gradient(top,#00a2e8,#00a2e8);
    color: var(--primary-fg);
    width: 12vw;
    font-size: large;
    min-width: 125px;
    text-decoration: none;
    border: 0px !important;
    font-family: inherit !important;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    font-size: 19px;
    vertical-align: middle;
    white-space: nowrap;
}

#phone_sbm {
    height: 4vh;
    margin: 1px;
}

.button_zakaz {
    min-width: 200px;
}

.button_zakaz,
.check_code_button {
    padding: 10px 40px;
    text-decoration: none;
    vertical-align: middle;
    margin-top: 10px;
}
.fixed-top {
  padding: 10px 10px 10px 20px;
}

.check_code_button {
    text-decoration: none;
    vertical-align: middle;
    margin-top: 10px;
    margin-bottom: 10px;
}

.check_code_button:hover, #phone_sb:hover, .button_zakaz:hover {
    background: #000 !important;
}

.btn {
    position: relative;
    background: var(--main-bg-color);
    color: var(--main-color);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 20px;
    font-size: 0.5rem;
    margin: 0 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}
#loading-bar {
    background-color: rgb(241, 72, 72);
    z-index: 5;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: right;
}
.toLoadingBar {
    animation: toLoading 0.3s linear forwards
}
.toLoading {
    animation: loading 1s 300ms linear forwards;
}
.toButton {
    animation: toButton 0.3s linear forwards
}

@keyframes toLoadingBar {
    0% {width: 100px; height: 60px;}
    20% {height: 30px;}
    100% {width: 450px; height: 30px;}
}
@keyframes toButton {
    0% {width: 450px; height: 30px;}
    20% {height: 60px;}
    100% {width: 180px; height: 60px;}
}
@keyframes loading {
    0% {width: 0; height: 30px;}
    100% {width: 100%; height: 30px;}
}

@media (max-width: 990px){
    #phone_numb {
        width: 192px;
    }
    #phone_sbm {
        height: 43px;
        margin: 3px;
    }
}