/* Mobile and Tablet Styles */
@media handheld, (max-device-width: 480px) {

    #desktop-check-element {
        display: none;
    }

    html {
        font-size: 12px;
        box-sizing: border-box;
    }
    .customcard{
        padding-left:60px;
        padding-top:55px
    }
    body {
        /* background-color: #F5CF8E; */
    }
    #page-options {
        display: none;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: white;
    }
    #open-options-btn {
        position: absolute;
        right: 1rem;
    }
    .left-col-69 {
        padding: 0;
        width: 100%;
    }

    /* Login Page */
    #form {
        height: 100%;
        font-size: 4vw;
        margin-top: 2rem;
        padding: 6rem 2rem;
    }
    #form input {
        padding: 1rem;
    }
    #form input[type=checkbox]{
        margin-right: 1rem;
    }
    #form div.right {
        margin: 4rem 6rem 0 0 !important;
    }

    /* List Patients */
    .list-patients-header-created {
        text-align: right;
    }
    .list-patients-header-select, .list-patients-header-last-email, .list-patients-header-id,
    .list-patients-header-created, .list-patients-header-create-ci {
        display: none;
    }
    .list-patients-column-select, .list-patients-column-create-ci, .list-patients-column-id,
    .list-patients-column-created, .list-patients-column-expires {
        display: none;
    }
    .flex-table {
        display: flex;
        flex-flow: row wrap;
        transition: 0.5s;
    }
    .flex-row {
        /*width: calc(100% / 3);*/
        text-align: center;
        border-right: solid 1px $table-border;
        border-bottom: solid 1px $table-border;
    }


    /* Patient Profile */
    #sidebar {
        display: none;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: white;
        margin-left: 0;
    }
    .ui-accordion .ui-accordion-content {
        padding: 0 !important;
    }
    .p_field.edit {
        width: auto !important;
    }
    .patient-profile-summary-right {

    }
    .patient-profile-summary-left {
        width: 100%;
    }

    /* Dashboard */
    .physician-table-row:nth-child(even) {
        background-color: rgba(90, 98, 104, 0.18);
    }

    /* Calendar */
    #calendar_inner_container .month_list_item .calendar_message {
        padding: 0;
    }
    #calendar_inner_container .month_list_item .calendar_message p {
        white-space: nowrap;
        overflow: hidden;
    }
    #calendar_inner_container .month_list_item .calendar_message .swap {
        background-color:green;
        padding: .6rem .10rem;
        float: left;
        margin-top: .2rem;
        margin-right: .2rem;
    }
    #calendar_inner_container .month_list_item .calendar_day {
        position: relative !important;
        text-align: left;
    }
    .swatch-full, .swatch-partial, .swatch-empty {
        padding: .6rem .10rem;
        float: left;
        margin-top: .2rem;
        margin-right: .2rem;
    }
    .swatch-full {
        background-color: green;
    }
    .swatch-partial {
        background-color: yellow;
    }
    .swatch-empty {
        background-color: red;
    }
    #calendar-change-month {
        display: none;
    }
    #content > #content_container > .outer_continer {
        flex-direction: column;
    }
    #content > #content_container > .outer_continer > .outer > .inner {
        display: flex;
        justify-content: space-between;
        margin: 0 !important;
    }
    #content > #content_container > .outer_continer > #event_container {
        text-align: center !important;
    }
    #patient_summary, #modify_appointment {
        width: 100% !important;
        height: 100% !important;
        position: fixed;
        left: 0 !important;
        top: 0 !important;
        z-index: 9999999;
        box-sizing: border-box;
    }
    #add_patient {
         width: 100% !important;
         height: 100% !important;
         padding-top: 30% !important;
         position: fixed;
         left: 0 !important;
         top: 0 !important;
         box-sizing: border-box;
     }
    .inner {
        width: 100%; /* make 100% since the other buttons are hidden */
    }

    /* Settings pages (e.g. Canned Reponses) */
    .list .list_column,
    #list .list_column,
    .list .table-cell {
        position: relative;
        /*width: calc(100% / 6.5);*/
        text-align: center;
        border-right: solid 1px $table-border;
        border-bottom: solid 1px $table-border;
        overflow: hidden;
    }
    .list .list_item, .list .list_top,
    #list #list_item, #list #list_top,
    .table .table-row {
        transition: 0.5s;
    }
    .list, #list {
        background: #fff;
    }
    /*
    .flex1, .flex2, .flex3, .flex4, .flex5, .flex6 {
        flex: initial !important;
    }
    */
    .mobile-hide {
        display: none !important;
    }
}

/* Desktop Styles */
@media (min-device-width: 480px) {
    html {
        font-size: 14px;
    }
    body {
        /*background-color: #B2D6FF; */
    }
    #page-options {
        width: 29%;
        float: right;
    }
    .left-col-69 {
        width: 69%;
        float: left;
    }

    /* Login Page */
    #form {
        max-width: 450px;
        margin: 0 auto;
        margin-top: 10rem;
        padding: 4rem 6rem;
    }
    #form div.right {
        margin: 0 !important;
        margin-top: 4rem !important;
    }
    #form div {
        margin-top: 1rem;
    }

    /* List Patients */
    .flex-table, .list_item {
        display: flex;
        flex-flow: row wrap;
        transition: 0.5s;
    }
    .list-patients-header-select {
        font-size: .75rem;
    }
    #open-options-btn, #close-options-btn {
        display: none;
    }

    /* Patient Profile */
    #patient-profile-summary-right {
        margin-left: 484px;
    }
    .patient-profile-summary-right {
        position:absolute;
        top:10px;
        right:10px;
    }
    .patient-profile-summary-left {
        float: left;
    }

    /* Calendar */
    #content > #content_container > .outer_continer > .outer > #event_container > #add_event::before {
        content: "\A";
    }

    /* Settings pages (e.g. Canned Reponses) */
    .list .list_item, .list .list_top,
    #list #list_item, #list #list_top,
    .table .table-row {
        transition: 0.5s;
    }
    .list, #list {
        background: #fff;
    }
    .month_list_item > .flex-table {
        padding: 0;
    }

}

.list_column, .flex-row {
    /*padding: .5rem;*/
    /*border: 1px solid lightblue;*/
    overflow: hidden;
}

div#contact_items .list_column ,.flex-row {
    max-width: 400px;
}

.flex-table {
    padding: 0 1rem;
}
.no-pad {
    padding: 0 !important;
}
.no-margin {
    margin: 0 !important;
}
.no-margin-top {
    margin-top: 0 !important;
}


.remove-margin-top{
    margin-top: 0px !important;
}