@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('font/ubuntu-v15-latin-regular.woff2') format('woff2'),  /*Chrome 26+, Opera 23+, Firefox 39+ */
       url('font/ubuntu-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

:root {
    --black: #130f40;
    --blue: #154360;
    --light-color: #666;
    --box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    --border:.2rem solid rgba(0,0,0,0.1);
    --outline:.1rem solid rgba(0,0,0,0.1);
    --outline-hover:.3rem solid var(--black);
    --white: #FFFFFF;
    --red: red;
}
* {
    font-family: 'Ubuntu', sens-serif;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    outline: none;
    border:none;
    text-decoration: none !important;
}
html {
    font-size: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}
body {
    background: #FDFEFE;
}


/* layout */
.layout {
    padding:0px 150px; 
    margin:100px 0px 0px 240px;
    transition: .4s linear;
}
.layout.active {
    margin:100px 0px 0px 74px;
    transition: .4s linear;
}
.layout .inner-layout .page-heading {
    font-size: 1.8rem;
    color: var(--blue);
    font-weight: 600;
}
.layout .inner-layout .line-break {
    border-bottom:3px solid #7B7D7D;
    margin-top: 2px;
}

.layout .inner-layout .context {
    padding-bottom: 20px;
}

.context input,
.context select,
.context textarea {
    border:1px solid #D5DBDB;
}

.context input:focus,
.context select:focus,
.context textarea:focus {
    border: inherit;
    outline: 0;
    box-shadow: none;
    background-color: #FDFEFE;
    border:1px solid #D0D3D4;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 0px 10px;
}

.context .submit .submit-btn {
    background: var(--red);
    border:none;
    color: var(--white);
    width: 185px;
    font-size: 22px;
    padding:2px 0px 3.5px 0px;
    border-radius: 50px;
    opacity: 0.9;
}
.context .submit .submit-btn:hover {
    opacity: 1;
}
.context .submit .submit-btn:focus {
    border: inherit;
    outline: 0;
    box-shadow: none;
}

.success-alert, .error-alert, .warning-alert {
    padding: 12px;
    font-size: 16px;
    box-sizing: border-box;
    border-radius: 4px;
    display: none;
    align-items: center;
    align-content: center; 
    box-shadow: rgba(99, 99, 99, 0.25) 0px 1px 12px 0px;
    position: fixed;
    top: 78.5px;
    right: 20px;
    z-index: 10;
    padding-right: 100px;
}
.success-alert {
    background-color: #ABEBC6;
    color: #145A32;
    border-left: 4px solid #145A32;
}
.error-alert {
    background-color: #F5B7B1;
    color: #641E16;
    border-left: 4px solid #641E16;
}
.warning-alert {
    background-color: #F9E79F;
    color: #9A7D0A;
    border-left: 4px solid #9A7D0A;
}
.success-alert svg, .error-alert svg, .warning-alert svg {
    width: 24px;
    height: 24px;
}

/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
/* Track */
::-webkit-scrollbar-track {
    background: #ECF0F1; 
    transition:.2s linear;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #B3B6B7; 
    transition:.2s linear;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #909497; 
    cursor: pointer;
}


/* media queries */
@media screen and (max-width: 1500px) {
    
}
@media screen and (max-width: 1198px) {
    html {
        font-size: 82%;
    }
}
@media screen and (max-width: 992px) {
    .submit-btn {
        width: 160px !important;
        font-size: 18px !important;
    }
}
@media screen and (max-width: 768px) {
    .layout {
        margin-top:130px !important;
    }
    .success-alert, .error-alert, .warning-alert {
        top: 108px;
    }
}
@media screen and (max-width: 600px) {
    .submit-btn {
        width: 140px !important;
        font-size: 16px !important;
    }

    .success-alert, .error-alert, .warning-alert {
        right: 15px;
        left: 89px;
        padding: 12px 6px;
        font-size: 14px;
    }
    .success-alert svg, .error-alert svg, .warning-alert svg {
        width: 20px;
        height: 20px;
    }
}
@media screen and (max-width: 450px) {
    .success-alert, .error-alert {
        font-size: 12px;
    }
    .success-alert svg, .error-alert svg, .warning-alert svg {
        width: 16px;
        height: 16px;
    }
}